gulp是什么虱饿？

gulp是工具鏈袱院、構(gòu)建工具蔑匣，可以配合各種插件做js壓縮掸掸，css壓縮，less編譯 替代手工實現(xiàn)自動化工作纪蜒。

1.構(gòu)建工具
2.自動化
3.提高效率用

基于流（streaming）的方式構(gòu)建衷恭，首先讀取文件，編譯壓縮文件（流的方式）纯续，最終將結(jié)果生成到配置的文件目錄下随珠。

初步使用 （先簡單壓縮CSS,JS體驗一下）

環(huán)境配置

1.首先,安裝nodejs.去官網(wǎng),download.根據(jù)自己的系統(tǒng)版本下載安裝.
安裝好node以后，自帶安裝好npm猬错。推薦使用cnpm牙丽，速度快一點。

2.我們接下來的步驟需要使用命令行,推薦使用git bash兔魂。
在你要運行g(shù)ulp的文件夾目錄里，右鍵举娩，使用git bash析校，開始敲命令。

git bash here.png

先敲個node -v 和npm -v 檢測一下安裝好了沒有铜涉。
如果出現(xiàn)版本號就是對的智玻。

看一下版本號.png

因為使用的git bash,所以在哪里右鍵的就會在哪個菜單定位。如果是使用windows自帶命令行的話芙代，需要使用cd命令進入菜單吊奢，查看文件目錄需要使用dir。

3.接下來全局安裝gulp
cnpm install -g gulp
需要管理員權(quán)限纹烹，我是win10系統(tǒng)页滚，右鍵開始菜單以管理員身份運行命令行，執(zhí)行該命令铺呵。后面如果安裝什么插件的時候提醒需要管理員權(quán)限裹驰，也是以同樣的方式。
接下來進入項目文件片挂，將gulp安裝到開發(fā)環(huán)境幻林。
執(zhí)行cnpm install --save-dev gulp
我們使用-save-dev來更新package.json文件，更新devDependencies值音念，以表明項目需要依賴gulp沪饺。

4.新建gulpfile文件
在項目的根目錄新建gulpfile.js文件。待會寫入內(nèi)容闷愤。
先介紹一下整葡，gulp只有五個方法：

task(用來定義任務(wù))
run(執(zhí)行某任務(wù)，在后面定義default或者.watch監(jiān)聽任務(wù)變動時會用到)
watch(監(jiān)聽肝谭，當(dāng)有文件變化時掘宪，會運行回調(diào)定義的其他任務(wù))
src（用來定義要編譯的源文件路徑）
dest（定義編譯完的文件輸出路徑）

5.安裝插件蛾扇。
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夾
gulp-notify:提示
安裝gulp-jshint可能會遇到一些問題，需要先安裝jshint魏滚。

cnpm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

我的文件夾目錄新建了一個assets用來存放編譯過的文件镀首，
stylesheets存放樣式文件，javascripts存放js文件鼠次。

在gulpfile.js里寫入：

// 引入 gulp及組件
var gulp=require('gulp'),  //gulp基礎(chǔ)庫
    minifycss=require('gulp-minify-css'),   //css壓縮
    concat=require('gulp-concat'),   //合并文件
    uglify=require('gulp-uglify'),   //js壓縮
    rename=require('gulp-rename'),   //文件重命名
    jshint=require('gulp-jshint'),   //js檢查
    notify=require('gulp-notify');   //提示


 
//css處理
gulp.task('minifycss',function(){
   return gulp.src('stylesheets/*.css')      //設(shè)置css
       .pipe(concat('order_query.css'))      //合并css文件到"order_query"
       .pipe(gulp.dest('assets/styles'))           //設(shè)置輸出路徑
       .pipe(rename({suffix:'.min'}))         //修改文件名
       .pipe(minifycss())                    //壓縮文件
       .pipe(gulp.dest('assets/styles'))            //輸出文件目錄
       .pipe(notify({message:'css task ok'}));   //提示成功
});

//JS處理
gulp.task('minifyjs',function(){
   return gulp.src(['javascripts/*.js'])  //選擇合并的JS
       .pipe(concat('order_query.js'))  //合并js
       .pipe(gulp.dest('assets/js'))       //輸出文件目錄
       .pipe(rename({suffix:'.min'}))    //重命名
       .pipe(uglify())                    //壓縮
       .pipe(gulp.dest('assets/js'))            //輸出 
       .pipe(notify({message:"js task ok"}));    //提示
});

gulp.task('default',function(){
    gulp.start('minifycss','minifyjs');
});

運行更哄，命令行里輸入gulp
或者gulp 任務(wù)名可以單運行某一個任務(wù)，例如 gulp minifyjs 腥寇。
到這里初步可以看到壓縮的成果啦成翩。

如果想要更改了文件后自動監(jiān)聽到變化并重新編譯，可以使用.watch（）方法赦役。

定義default任務(wù)麻敌。這個任務(wù)是基于其他任務(wù)的。命令行只寫一個gulp時掂摔，會自動運行default里的命令术羔，可以用它將所有的任務(wù)關(guān)聯(lián)起來，加入監(jiān)聽.watch乙漓，這樣當(dāng)文件出現(xiàn)修改變動時级历，將會自動重新編譯。
注意一點坑的是：寫文件路徑叭披，我一開始多寫了一個斜杠寥殖，寫成了'/stylesheets/*.less',于是就沒有運行成功。改好后果然每次修改都會重新編譯涩蜘。

gulp.task('default', function(){
    gulp.start('minifycss','minifyjs','testLess');
    gulp.watch('stylesheets/*.less', function(){
        gulp.start('testLess');
    });
});

gulp-changed

只對修改過的文件進行編譯或者打包嚼贡，沒動過的直接輸出(我遇到了問題，changed似乎不生效同诫，每次修改后重新編譯仍然會運行所有的文件）

var gulp   = require('gulp');
var changed = require('gulp-changed');
var uglify = require('gulp-uglify');

gulp.task('changed',function(){
  return gulp.src('./js/*.js') // 監(jiān)視文件：js目錄下所有的js文件
    .pipe(changed('./dist'))  // 過濾未修改文件,需要指定文件輸出目錄
    .pipe(gulp.dest('./dist'));  // 輸出文件
});

gulp.task('compress',['changed'], function() {
  return gulp.src('./js/*.js') // 壓縮文件：js目錄下所有的js文件
    .pipe(plumer()) //異常處理
    .pipe(uglify())  // 使用uglify插件執(zhí)行壓縮操作
    .pipe(gulp.dest('./dist'));  // 輸出壓縮后的文件
});

gulp-plumber

使用gulp watch 對文件進行熱監(jiān)控時编曼，如果出現(xiàn)問題，會直接停止watch剩辟，還需要在控制臺再次運行掐场。
用gulp-pumber后出現(xiàn)異常會在控制臺顯示錯誤，但并不中斷watch贩猎，當(dāng)錯誤修改好后還可以繼續(xù)執(zhí)行watch熊户。

npm install --save-dev gulp-plumber

gulp.task('compress',['changed'], function() {
  return gulp.src('./js/*.js') // 壓縮文件：js目錄下所有的js文件
  .pipe(plumer()) //異常處理
    .pipe(uglify())  // 使用uglify插件執(zhí)行壓縮操作
    .pipe(gulp.dest('./dist'));  // 輸出壓縮后的文件
});

browersync

可以在pc、手機吭服、pad上多端同時查看頁面效果并且不用手動刷新嚷堡！
炒雞方便！

cnpm install -gd browser-sync

安裝好后進入項目的根路徑，輸入

brower-sync start --server --files "**"

會啟動一個小型的web應(yīng)用服務(wù)器蝌戒。--files "**"表示監(jiān)視根路徑下所有文件的修改情況串塑，當(dāng)文件被修改保存時，修改內(nèi)容會實時同步到web瀏覽器中北苟，控制臺會顯示url信息桩匪。

localhost：3000 默認地址
localhost：3001 訪問設(shè)置頁面

gulp也有插件.只是我這里裝了gulp的插件后需要手動刷新
安裝

npm install browser-sync gulp --save-dev

var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});