gulp基礎使用總結

gulp 安裝

1 檢測電腦有沒有安裝node
執行

$ node  -v  
$ npm -v

若是沒有安裝的話，能夠到https://nodejs.org/en/download/下載安裝。

2 全局安裝gulp

$ npm install --global gulp

3 給對應的項目安裝gulp
執行

$ npm install gulp --save-dev

4 初始化項目目錄
執行 $ npm init 生成 package.json

在對應的根目錄下建立 gulpfile.js

文件中的基本內容爲：

var gulp = require('gulp');
gulp.task('default', function() {
  // place code for your default task here
});

運行gulp

$ gulp

安裝對應的 package

下面都以less的自動編譯功能需求爲例子

這裏介紹須要的package

gulp-less

gulp的less插件
安裝方法：

$ npm install gulp-less

簡單使用舉例：

var less = require('gulp-less');
var path = require('path');
 
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

經常使用參數：
paths: 用於@import 指令的路徑的數組。
plugins: less插件的數組。舉例以下：
less 如今支持plugins，這能夠增長額外功能

var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
 
return gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));

參考網站：
http://lesscss.org/usage/#plugins,
https://www.npmjs.com/package/gulp-less
http://lesscss.org/#using-less-configuration
http://lesscss.org/usage/#plugins

gulp-sourcemaps

gulp-less一般和gulp-sourcemaps一塊兒使用產生對應的文件資源圖，這裏須要初始化gulp-sourcemaps優先運行gulp-less編譯，而後寫資源圖，例如：

var sourcemaps = require('gulp-sourcemaps'); 
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./public/css'));

默認狀況下，gulp-sourcemaps編寫內嵌在被編譯的css文件裏的資源圖，爲了將它們寫在單獨的文件裏，能夠在sourcemaps.write()裏指定相對的文件路徑。

var sourcemaps = require('gulp-sourcemaps');
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

gulp-notify

是gulp中基於vinyl文件或者使用節點通知模塊的各類電腦操做系統報的錯或者發送的信息，給出對應的通知和提醒。
安裝：

npm install --save-dev gulp-notify

而後將其放入gulpfile.js

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Hello Gulp!"));

或者：

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Found file: <%= file.relative %>!"));

gulp-plumber

阻止數據流由於其餘gulp插件的錯誤提醒而中斷。
安裝：npm install --save-dev gulp-plumber
多與上述 gulp-notify中的onError()方法一同出現。

gulp.src("../test/fixtures/*")
      .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }));

參考網站：https://www.npmjs.com/package/gulp-notify

gulp模塊的方法

src()

用於產生數據流，能夠傳入參數，也就是所要處理的文件，參數的寫法有：

less/example.less
less/*.less  less文件夾下的全部後綴爲less文件
less/**/*.less less目錄及其全部子目錄中的全部後綴名爲less的文件。
!less/example.less 除了example.less之外的全部文件。
*.+(js  css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

改參數也能夠是一個數組，指定多個成員，例如：

gulp.src(['less/*.less','less/*.min.less'])

dest()

該方法將管道的輸出寫入文件，同時將這些輸出繼續輸出，因此能夠依次調用屢次dest方法，將輸出寫入多個目錄。若是有目錄不存在，將會被新建。
dest方法還能夠接受第二個參數，表示配置對象。

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

配置對象有兩個字段。cwd字段指定寫入路徑的基準目錄，默認是當前目錄；mode字段指定寫入文件的權限，默認是0777

watch()

watch方法用於指定須要監視的文件。一旦這些文件發生變更，就運行指定任務。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

參考網站：http://javascript.ruanyifeng.com/tool/gulp.html