Glup快速入門整理

• Gulp介紹

  • 中文主頁: http://www.gulpjs.com.cn/

  • gulp是與grunt功能相似的前端項目構建工具, 也是基於Nodejs的自動任務運行器

  • 能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的
    合併、壓縮、檢查、監聽文件變化、瀏覽器自動刷新、測試等任務

  • gulp更高效(異步多任務), 更易於使用, 插件高質量

• 安裝 nodejs, 查看版本: node -v

• 建立一個簡單的應用gulp_test

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

• 安裝gulp:

  • 全局安裝gulp

    npm install gulp -g

  • 局部安裝gulp

    npm install gulp --save-dev

  • 配置編碼: gulpfile.js

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

  • 構建命令:

    gulp

• 使用gulp插件

  • 相關插件:

    • gulp-concat : 合併文件(js/css)

    • gulp-uglify : 壓縮js文件

    • gulp-rename : 文件重命名

    • gulp-less : 編譯less

    • gulp-clean-css : 壓縮css

    • gulp-livereload : 實時自動編譯刷新

  • 重要API

    • gulp.src(filePath/pathArr) :

      • 指向指定路徑的全部文件, 返回文件流對象

      • 用於讀取文件

    • gulp.dest(dirPath/pathArr)

      • 指向指定的全部文件夾

      • 用於向文件夾中輸出文件

    • gulp.task(name, [deps], fn)

      • 定義一個任務

    • gulp.watch()

      • 監視文件的變化

  • 處理js

    • 建立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')) //合併到臨時文件     
              .pipe(gulp.dest('dist/js')) //生成到目標文件夾
              .pipe(rename({suffix: '.min'})) //重命名  
              .pipe(uglify())    //壓縮
              .pipe(gulp.dest('dist/js'));
      });
      
      gulp.task('default', ['minifyjs']);

    • 頁面引入js瀏覽測試 : index.html

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

    • 打包測試: gulp

  • 處理css

    • 建立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處理任務
      gulp.task('lessTask', function () {
        return gulp.src('src/less/*.less')
            .pipe(less()) 
            
            .pipe(gulp.dest('src/css'));
      })
      //css處理任務, 指定依賴的任務
      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']);

    • 頁面引入css瀏覽測試 : 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>

    • 打包測試: gulp

  • 處理html

    • 下載插件:

      npm install gulp-htmlmin --save-dev

    • 配置編碼

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

    • 修改頁面引入

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

    • 打包測試: gulp

  • 自動編譯

    • 下載插件

      npm install gulp-livereload --save-dev

    • 配置編碼:

      var livereload = require('gulp-livereload');
                
      //全部的pipe
      .pipe(livereload());
      
      gulp.task('watch', ['default'], function () {    
        //開啓監視
        livereload.listen();
        //監視指定的文件, 並指定對應的處理任務
        gulp.watch('src/js/*.js', ['minifyjs'])
        gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']);
      });

    • 熱加載(實時加載)

      • 下載插件：gulp-connect

        一、 npm install gulp-connect --save-dev
        二、 註冊 熱加載的任務 server，注意依賴build任務 
        三、註冊熱加載的任務
            //配置加載的選項
            connect.server({
        root : 'dist/',//監視的源目標文件路徑
        livereload : true,//是否實時刷新
        port : 5000//開啓端口號
             });
             // 自動開啓連接
             open('http://localhost:5000');//npm install open --save-dev
             // 監視目標文件
            gulp.watch('src/js/*.js', ['js']);
            gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);

    • 擴展

      • 打包加載gulp插件

      • 前提：將插件下載好。

      • 下載打包插件： gulp-load-plugins

      • npm install gulp-load-plugins --save-dev

      • 引入： var $ = require('gulp-load-plugins')();！！！引入的插件是個方法，必須記住調用。

      • 神來之筆：其餘的插件不用再引入了

      • 使用方法：

        * 全部的插件用 $ 引出，其餘插件的方法名統一爲插件的功能名字(即插件名字的最後一部分)：如：concat,connect,cssmin...
        gulp.task('less', function () {
              return gulp.src('src/less/*.less')
            .pipe($.less())//將less轉換爲less
            .pipe(gulp.dest('src/css/'))//將轉換爲less的文件輸出到src下
            .pipe($.livereload())//實時刷新
            .pipe($.connect.reload())
        });