Gulp不徹底入門教程

引言

gulp 是基於 Nodejs 的自動任務運行器，能自動化地完成javascript/coffee/sass/less/html/image/css等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，gulp 借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單.

1、安裝Gulp

gulp 是基於 Nodejs 的自動任務運行器，因此安裝gulp以前要先安裝node.js環境。

打開Nodejs官網，點擊碩大的綠色「install」按鈕，能夠檢測一下安裝的Node和npm版本：

而後全局安裝gulp：

npm install -g gulp

一樣安裝完以後，能夠檢測gulp的版本：

全局安裝gulp後，還須要在每一個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，而後在命令行中執行：

npm install gulp

若是想在安裝的時候把gulp寫進項目package.json文件的依賴中，則能夠加上–save-dev：

npm install  gulp --save-dev

--save：將保存配置信息至package.json（package.json是nodejs項目配置文件。package.json是一個普通json文件，不能添加任何註釋。參看 http://www.zhihu.com/question/23004511
）；
-dev/-dep：保存至package.json的devDependencies節點，不指定-dev/dep將保存至dependencies節點；

安裝Gulp以後，能夠運行npm init初始化package.json文件：

須要注意的是，name是不能包含大寫字母的:

初始化以後，須要在項目的根目錄下創建gulpfile.js文件，文件名不能更改：

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('hello gulp');
});

默認任務將被運行，向控制檯輸出hello gulp。若是須要運行單個任務, 使用 gulp taskname命令(上述等效於gulp default)。

也能夠看gulp官方的 Getting Started

2、Gulp API

gulp在git上只介紹了四個API：task、dest、src、watch，除此以外，gulp還提供了一個run方法。

1.gulp.src(globs[, options])
src()方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件.

參數	說明
globs	須要處理的源文件匹配符路徑
options	有3個屬性buffer、read、base

globs的文件匹配說明：
「src/a.js」：指定具體文件；
「*」：匹配全部文件 例：src/*.js(包含src下的全部js文件)；
「**」：匹配0個或多個子文件夾 例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；
「{}」：匹配多個屬性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；
「!」：排除文件 例：!src/a.js(不包含src下的a.js文件)；

var gulp = require('gulp'),

gulp.task('test', function () {
    //gulp.src('test/style.css')
    gulp.src(['css/**/*.css','!css/{extend,page}/*.css'])
        .pipe(gulp.dest('./css'));
});

options的三個屬性說明：
options.buffer： 類型：Boolean 默認：true 設置爲false，將返回file.content的流而且不緩衝文件，處理大文件時很是有用；
options.read： 類型：Boolean 默認：true 設置false，將不執行讀取文件操做，返回null；
options.base： 類型：String 設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接

2.gulp.dest(path[, options])
dest()方法是指定處理完後文件輸出的路徑；

參數	說明
path	指定文件輸出路徑，或者定義函數返回文件輸出路徑亦可
options	有2個屬性cwd、mode

options.cwd
Type: String Default: process.cwd()
cwd for the output folder, only has an effect if provided output folder is relative.
options.mode
Type: String Default: 0777
Octal permission string specifying mode for any folders that need to be created for output folder.

修改以前的gulpfile.js的內容以下：

var gulp = require('gulp');

gulp.task('testtask', function() {
  gulp.src('./js/test.js')
      .pipe(gulp.dest('./build'));
});

運行結果以下圖：

利用gulp.dest('./build')將新建的test.js文件移動到了build目錄，對比先後兩次的ls -al命令，dest()會自動建立目錄。

3.gulp.task(name[, deps], fn)
該方法用於定義一個gulp任務。

參數	說明
name	任務名稱，不能包含空格
deps	該任務依賴的任務，依賴任務的執行順序跟在deps中聲明的順序一致
fn	該任務調用的插件操做

再次修改gulpfile.js文件，定義一個任務列表

var gulp = require('gulp');

gulp.task('task1',function(){
        console.log('task1 done');
});

gulp.task('task2',function(){
        console.log('task2 done!');
});

gulp.task('task3',function(){
        console.log('task3 done');
});

gulp.task('end',['task1','task3','task2'],function(){
        console.log('end done');
});

運行結果：

4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
watch()方法是用於監聽文件變化，文件一修改就會執行指定的任務.

參數	說明
glob	須要處理的源文件匹配符路徑
opts	具體參看https://github.com/shama/gaze；
tasks	須要執行的任務的名稱數組
cb(event)	每一個文件變化執行的回調函數

每當監視的文件發生變化時，就會調用cb函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息:
type:屬性爲變化的類型，能夠是added,changed,deleted
path:屬性爲發生變化的文件的路徑

gulp.task('uglify',function(){ 
    //do something 
}); 
gulp.task('reload',function(){ 
    //do something 
}); 
gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

// same as 
gulp.watch('js/**/*.js', function(event){ 
    //變化類型 added爲新增,deleted爲刪除，changed爲改變
    console.log(event.type); 
    //變化的文件的路徑
    console.log(event.path); 
});

5.gulp.run()
gulp模塊的run()方法，表示要執行的任務。可能會使用單個參數的形式傳遞多個任務。注意：任務是儘量多的並行執行的，而且可能不會按照指定的順序運行.

修改以前的gulpfile.js文件中的end任務：

gulp.task('end',function(){
    gulp.run('task1','task3','task2');
});

運行結果：

3、gulp常見插件

1.gulp-uglify
使用gulp-uglify壓縮javascript文件，減少文件大小。

利用npm先安裝gulp-uglify:

npm install --save-dev gulp-uglify

安裝以後，在gulpfile.js中引入：

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要壓縮的js文件
    .pipe(uglify())
    .pipe(gulp.dest('dist/js')); //壓縮後的路徑
});

###壓縮多個文件
var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    //多個文件以數組形式傳入
    gulp.src(['src/js/index.js','src/js/detail.js']) 
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

var gulp = require('gulp'),
    uglify= require('gulp-uglify');

##匹配符「!」，「*」，「**」，「{}」
gulp.task('jsmin', function () {
    //壓縮src/js目錄下的全部js文件
    //除了test1.js和test2.js（**匹配src/js的0個或多個子文件夾）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) 
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

2.gulp-rename
用來重命名文件流中的文件。用gulp.dest()方法寫入文件時，文件名使用的是文件流中的文件名，若是要想改變文件名，那能夠在以前用gulp-rename插件來改變文件流中的文件名。

npm install --save-dev gulp-rename

簡單運用：

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //壓縮
    //會將jquery.js重命名爲jquery.min.js
    .pipe(rename('jquery.min.js')) 
    .pipe(gulp.dest('js'));
});

3.gulp-minify-css
壓縮css文件時並給引用url添加版本號避免緩存:

npm install --save-dev gulp-minify-css

簡單運用：

var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
    //確保已本地安裝gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]
    cssver = require('gulp-make-css-url-version'); 

gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssver()) //給css文件裏引用文件加版本號（文件MD5）
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

4.gulp-htmlmin
使用gulp-htmlmin壓縮html，能夠壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操做。

npm install --save-dev gulp-htmlmin

簡單使用：

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');

gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        //省略布爾屬性的值 <input checked="true"/> ==> <input />
        collapseBooleanAttributes: true,
        //刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeEmptyAttributes: true,
        //刪除<script>的type="text/javascript"
        removeScriptTypeAttributes: true,
        //刪除<style>和<link>的type="text/css"
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

5.gulp-concat
用來把多個文件合併爲一個文件,咱們能夠用它來合併js或css文件等，這樣就能減小頁面的http請求數了.

npm install --save-dev gulp-concat

簡單使用：

var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合併的文件
    .pipe(concat('all.js'))  // 合併匹配到的js文件並命名爲 "all.js"
    .pipe(gulp.dest('dist/js'));
});

其它經常使用插件：

gulp-imagemin:壓縮圖片文件
gulp-jshint:偵測javascript代碼中錯誤和潛在問題的工具

相關文章：gulp plugins 插件介紹

原文連接：http://www.ido321.com/1622.html

相關連接：

Gulp
Gulp API
Gulp Plugins
Get Started
npmjs
nodejs