gulp 教程

一.gulp安裝和配置

1.安裝

npm install --g gulp//全局安裝
npm install --save-dev gulp//在項目中安裝，node_modules
npm install --save-dev gulp-uglify//安裝gulp 插件

2.建立gulpfile.js（注意：文件名必須是gulpfile，不然命令行下的gulp指令如何知道執行哪個js文件呢？）

var gulp = require('gulp');

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

3.命令行執行gulp文件，$gulp

二.gulp 原理

• gulp原理解析：數據流

三.gulp api

最簡單的gulpfile.js

// 導入 gulp/gulp-sass/gulp-autoprefixer 三個模塊
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

// 使用 gulp.task() 方法註冊一個任務
// 第一個參數是任務名稱
// 第二個參數是任務的執行邏輯
gulp.task('styles', function() {
    return gulp.src('sass/demo.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('css'));
});

glup的5大函數

• gulp.task(name, fn)，註冊一個 gulp 任務

• gulp.run(...tasks)，並行運行多個 gulp 任務

• gulp.watch(glob, fn)，實時監控內容，當 glob 內容變化時，執行 fn

• gulp.src(glob)，glob 是目標文件的路徑，返回一個可讀的 stream

• gulp.dest(gloc)，glob 是輸出路徑，返回一個可寫的 stream

api
gulp.src('index.js');
gulp.src(['js/**/*.js', '!js/**/*.min.js']);//數組，制定多個文件

• dest():dest方法將管道的輸出寫入文件，同時將這些輸出繼續輸出，因此能夠依次調用屢次dest方法，將輸出寫入多個目錄。若是有目錄不存在，將會被新建

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

/*
*@param taskname 任務名稱
*@param [] 任務依賴前置，必須執行完這個數組的任務，才能夠執行任務
*@param fn 任務邏輯
*/
gulp.task('taskname', [ taskDep1, taskDep2 ],fn):
命令行 gulp taskname，便可執行gulp任務
注意：gulp.task('default'，fn)，是默認執行任務，在命令行啓動gulp，默認執行動做


/*
*@param 檢測文件路徑
*@param 檢測到文件變化，執行任務
*/
gulp.watch('文件路徑', [task]):
gulp.task('watch', function() {
    gulp.watch('sass/demo.scss', ['styles']);
});

參考文章：
原理：http://www.jianshu.com/p/f5900e7de3eb