自動化構建工具 gulp

官網

相較於 grunt 更高效，異步多任務，更易於使用，插件高質量

特色：

任務化： 無論什麼事情，首先註冊一個任務

基於流： 基於數據流，gulp 有本身的內存

會讀你本地文件輸入流到內存

在內存裏操做完文件後，再從 gulp 內存輸出流到本地

關鍵字：

glob

匹配模式，或者說匹配模式的數組（array of globs）的文件

glob 請參考 node-glob 語法 或者，你也能夠直接寫文件的路徑

返回一個 Vinyl files 的 stream ，它能夠被 piped 到別的插件中

• gulp.src('client/templates/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest('build/minified_templates'));

1. gulp API 文檔

gulp.src(globs[, options])

gulp.dest(path[, options])

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

gulp.watch(glob [, opts], tasks)

gulp.watch(glob [, opts, cb])

2. gulp 插件

英文官網

3. 基本項目架構

4. 安裝 gulp

sudo npm install -g gulp

sudo npm install --save-dev gulp

5. 建立並配置 gulpfile.js

6. 經常使用插件

7. 配置 js 文件合併壓縮插件

① npm install --save-dev 插件

② 引入插件

③ 註冊任務

④ gulp 執行生成目標文件

gulp  的任務便可以同步，也能夠異步。。。異步，意味着兩個任務 可能同時開啓

• 當 task 的 function 寫 return 時，任務就是異步的。。。不然任務是同步執行的
• return 還能夠使得內存及時釋放

這樣一來，就存在這樣一個問題：

得確保 全部的 less 都已經編譯成了 css，才能開啓 合併壓縮 css 任務，

解決：

指定任務的依賴任務，該任務就會在依賴任務完成後，纔會開始執行

(1) 文件合併、壓縮、重命名

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

編寫 gulpfile.js

而後執行 gulp js 生成目標 js，此時，能夠在 html 引入使用

(2) less 編譯

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

編寫 gulpfile.js

而後執行 gulp js 生成目標js

此時，能夠在 html 引入使用

(3) html 文件壓縮

• sudo npm install --save-dev gulp-htmlmin

(4) 半自動 熱更新

• sudo npm install --save-dev gulp-livereload

(5) 全自動 熱更新

• sudo npm install --save-dev gulp-connect

內置一個微型服務器

(6) 自動打開瀏覽器 訪問指定連接

• sudo npm install --save-dev open

(7) 

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

改寫成

此時，全部方法，都在 $ 這個對象裏，使用時以下：

須要注意的是：

gulp-htmlmin 使用時，是 $.htmlmin 而非 $.htmlMin

gulp-clean-css 使用時，是 $.cleanCss 而非... ...

8. 項目架構：

9. 項目代碼

gulpfile.js

• var gulp = require('gulp');
  var $ = require('gulp-load-plugins')()//引入的是函數，調用之後返回的是對象
  
  
  // var concat = require('gulp-concat');
  // var rename = require('gulp-rename');
  // var uglify = require('gulp-uglify');
  // var less = require('gulp-less');
  // var cssClean = require('gulp-clean-css');
  // var htmlMin = require('gulp-htmlmin');
  // var livereload = require('gulp-livereload');
  // var connect = require('gulp-connect');
  var open = require('open');
  
  //註冊合併壓縮js的任務
  gulp.task('js', function () {
      //你的任務執行 具體過程
      return gulp.src('src/js/*.js') // 找目標原文件 將原文件的數據讀取到gulp的內存中
          .pipe($.concat('build.js'))//合併js文件
          .pipe(gulp.dest('dist/js/'))//臨時輸出
          .pipe($.uglify())//壓縮js文件
          .pipe($.rename({suffix:'.min'}))//重命名
          .pipe(gulp.dest('dist/js/'))//輸出
          //.pipe(livereload())//實時加載
          .pipe($.connect.reload())
  });
  
  //註冊編譯less的任務
  gulp.task('less', function () {
      return gulp.src('src/less/*.less')
          .pipe($.less())//將less文件轉換爲css文件
          .pipe(gulp.dest('src/css/'))
          //.pipe(livereload())//實時加載
          .pipe($.connect.reload())
  });
  
  //註冊合併壓縮css的任務
  gulp.task('css',['less'] ,function () {
      return gulp.src('src/css/*.css')
          .pipe($.concat('build.css'))
          .pipe(gulp.dest('dist/css/'))
          .pipe($.rename({suffix:'.min'}))
          .pipe($.cleanCss({compatibility: 'ie8'}))
          .pipe(gulp.dest('dist/css/'))
          //.pipe(livereload())//實時加載
          .pipe($.connect.reload())
  
  });
  
  //註冊壓縮html的任務
  gulp.task('html', function () {
      return gulp.src('index.html')
          .pipe($.htmlmin({collapseWhitespace: true}))
          .pipe(gulp.dest('dist/'))
          //.pipe(livereload())//實時加載
          .pipe($.connect.reload())
  });
  
  //註冊監視的任務--->半自動
  gulp.task('watch',['default'], function () {
      //開啓監視
      livereload.listen();
  
      //確認監視的目標而且綁定相應的任務
      gulp.watch('src/js/*.js', ['js']);
      gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
  });
  
  //註冊一個全自動的任務
  gulp.task('dev',['default'], function () {
      //配置服務器選項
      $.connect.server({
          root : 'dist/',//監視的源目標文件路徑
          livereload : true,//是否實時刷新
          port : 5000//開啓端口號
      });
      open('http://localhost:5000/');
  
      //確認監視的目標而且綁定相應的任務
      gulp.watch('src/js/*.js', ['js']);
      gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
  })
  
  //註冊一個默認任務
  gulp.task('default', ['js', 'less', 'css','html']);