• 中文主頁(yè): http://www.gulpjs.com.cn/
• gulp是與grunt功能類似的前端項(xiàng)目構(gòu)建工具, 也是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器
• 能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的
  合并、壓縮、檢查、監(jiān)聽文件變化、瀏覽器自動(dòng)刷新、測(cè)試等任務(wù)
• gulp更高效(異步多任務(wù)), 更易于使用, 插件高質(zhì)量

|- dist
|- src
  |- js
  |- css
  |- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
  {
    "name": "gulp_test",
    "version": "1.0.0"
  } 

• 全局安裝gulp

  npm install gulp -g
  

• 局部安裝gulp

  npm install gulp --save-dev
  

• 配置編碼: gulpfile.js

  //引入gulp模塊
  var gulp = require('gulp');
  //定義默認(rèn)任務(wù)
  gulp.task('任務(wù)名', function() {
    // 將你的任務(wù)的任務(wù)代碼放在這
  });
  gulp.task('default', ['任務(wù)'])//異步執(zhí)行
  

• 構(gòu)建命令:

  gulp
  

• 相關(guān)插件:
  • gulp-concat : 合并文件(js/css)
  • gulp-uglify : 壓縮js文件
  • gulp-rename : 文件重命名
  • gulp-less : 編譯less
  • gulp-clean-css : 壓縮css
  • gulp-livereload : 實(shí)時(shí)自動(dòng)編譯刷新
• 重要API
  • gulp.src(filePath/pathArr) :
    • 指向指定路徑的所有文件, 返回文件流對(duì)象
    • 用于讀取文件
  • gulp.dest(dirPath/pathArr)
    • 指向指定的所有文件夾
    • 用于向文件夾中輸出文件
  • gulp.task(name, [deps], fn)
    • 定義一個(gè)任務(wù)
  • gulp.watch()
    • 監(jiān)視文件的變化
• 處理js
  • 創(chuàng)建js文件
    • src/js/test1.js

      (function () {
        function add(num1, num2) {
          var num3 = 0;
          num1 = num2 + num3;
          return num1 + num2;
        }
        console.log(add(10, 30));
      })();
      

    • src/js/test2.js

      (function () {
        var arr = [2,3,4].map(function (item, index) {
            return item+1;
        });
        console.log(arr);
      })();
      

  • 下載插件:

    npm install gulp-concat gulp-uglify gulp-rename --save-dev
    

  • 配置編碼

    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    
    gulp.task('minifyjs', function() {
        return gulp.src('src/js/*.js') //操作的源文件
            .pipe(concat('built.js')) //合并到臨時(shí)文件     
            .pipe(gulp.dest('dist/js')) //生成到目標(biāo)文件夾
            .pipe(rename({suffix: '.min'})) //重命名  
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest('dist/js'));
    });
    
    gulp.task('default', ['minifyjs']);
    

  • 頁(yè)面引入js瀏覽測(cè)試 : index.html

    <script type="text/javascript" src="dist/js/built.min.js"></script>
    

  • 打包測(cè)試: gulp
• 處理css
  • 創(chuàng)建less/css文件
    • src/css/test1.css

      #div1 {
        width: 100px;
        height: 100px;
        background: green;
      }
      

    • src/css/test2.css

      #div2 {
        width: 200px;
        height: 200px;
        background: blue;
      }
      

    • src/less/test3.less

      @base: yellow;
      .index1 { color: @base; }
      .index2 { color: green; }
      

  • 下載插件:

    npm install gulp-less gulp-clean-css --save-dev 
    

  • 配置編碼

    var less = require('gulp-less');
    var cleanCSS = require('gulp-clean-css');
    
    //less處理任務(wù)
    gulp.task('lessTask', function () {
      return gulp.src('src/less/*.less')
          .pipe(less()) 
          
          .pipe(gulp.dest('src/css'));
    })
    //css處理任務(wù), 指定依賴的任務(wù)
    gulp.task('cssTask',['lessTask'], function () {
    
      return gulp.src('src/css/*.css')
          .pipe(concat('built.css'))
          .pipe(gulp.dest('dist/css'))
          .pipe(rename({suffix: '.min'}))
          .pipe(cleanCSS({compatibility: 'ie8'}))
          .pipe(gulp.dest('dist/css'));
    });
    
    gulp.task('default', ['minifyjs', 'cssTask']);
    

  • 頁(yè)面引入css瀏覽測(cè)試 : index.html

    <link rel="stylesheet" href="dist/css/built.min.css">
    <div id="div1" class="index1">div1111111</div>
    <div id="div2" class="index2">div2222222</div>
    

  • 打包測(cè)試: gulp
• 處理html
  • 下載插件:

    npm install gulp-htmlmin --save-dev
    

  • 配置編碼

    var htmlmin = require('gulp-htmlmin');
    //壓縮html任務(wù)
    gulp.task('htmlMinify', function() {
        return gulp.src('index.html')
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(gulp.dest('dist'));
    });
    gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);
    

  • 修改頁(yè)面引入

    <link rel="stylesheet" href="css/built.min.css">
    <script type="text/javascript" src="js/built.min.js"></script>
    

  • 打包測(cè)試: gulp
• 自動(dòng)編譯

  • 下載插件

    npm install gulp-livereload --save-dev
    

  • 配置編碼:

    var livereload = require('gulp-livereload');
              
    //所有的pipe
    .pipe(livereload());
    
    gulp.task('watch', ['default'], function () {    
      //開啟監(jiān)視
      livereload.listen();
      //監(jiān)視指定的文件, 并指定對(duì)應(yīng)的處理任務(wù)
      gulp.watch('src/js/*.js', ['minifyjs'])
      gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']);
    });
    

  • 熱加載(實(shí)時(shí)加載)

    • 下載插件：gulp-connect

    1、 npm install gulp-connect --save-dev
    2、 注冊(cè) 熱加載的任務(wù) server，注意依賴build任務(wù) 
    3、注冊(cè)熱加載的任務(wù)
        //配置加載的選項(xiàng)
        connect.server({
              root : 'dist/',//監(jiān)視的源目標(biāo)文件路徑
              livereload : true,//是否實(shí)時(shí)刷新
              port : 5000//開啟端口號(hào)
         });
         // 自動(dòng)開啟鏈接
         open('http://localhost:5000');//npm install open --save-dev
         // 監(jiān)視目標(biāo)文件
        gulp.watch('src/js/*.js', ['js']);
        gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);
    

  • 擴(kuò)展

    • 打包加載gulp插件
    • 前提：將插件下載好。
    • 下載打包插件： gulp-load-plugins
    • npm install gulp-load-plugins --save-dev
    • 引入： var $ = require('gulp-load-plugins')();?。?！引入的插件是個(gè)方法，必須記住調(diào)用。
    • 神來之筆：其他的插件不用再引入了
    • 使用方法：

      * 所有的插件用 $ 引出，其他插件的方法名統(tǒng)一為插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
      gulp.task('less', function () {
          return gulp.src('src/less/*.less')
          .pipe($.less())//將less轉(zhuǎn)換為less
          .pipe(gulp.dest('src/css/'))//將轉(zhuǎn)換為less的文件輸出到src下
          .pipe($.livereload())//實(shí)時(shí)刷新
          .pipe($.connect.reload())
      });