前言

Gulp，簡而言之，就是前端自動化開發工具，利用它，我們可以提高開發效率。

比如：

　　1、  壓縮js

　　2、  壓縮css

　　3、  壓縮less

　　4、  壓縮圖片

　　等等…

我們完全可以利用Gulp來自動化地完成這些重複性很強的工作。

Gulp可以幫助我們 用自動化構建工具增強你的工作流程！

好了，廢話不多說了。既然要了解Gulp，就得先安裝它。Gulp是基於node來實現的，so你得先有個node環境

優勢：

node環境有了後，安裝Gulp就很easy咯

入門指南

1. 全域性安裝 gulp：

$ npm install --global gulp  （後面加-g代表全域性）
 

安裝完成後，輸入gulp –v檢視是否安裝成功。

如下：

但，就算你這麼安裝了全域性gulp，你每次到專案中時，還得在相應目錄下安裝gulp。

原因就是，gulp就這麼設定的，避免發生版本衝突。

所以這步安裝gulp可以可無，不過就當初步瞭解它嘛

2. 作為專案的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

3. 在專案根目錄下建立一個名為 gulpfile.js 的檔案：

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的預設的任務程式碼放在這
});
 

4. 執行 gulp：

$ gulp

預設的名為 default 的任務（task）將會被執行，在這裡，這個任務並未做任何事情。

想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>。

說明：gulpfile.js是gulp專案的配置檔案，是位於專案根目錄的普通js檔案（其實將gulpfile.js放入其他資料夾下亦可）

//匯入工具包 require('node_modules裡對應模組')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');
 
 
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //該任務針對的檔案
        .pipe(less()) //該任務呼叫的模組
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定義預設任務 elseTask為其他任務，該示例沒有定義elseTask任務
 
//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回撥函式
//gulp.src(globs[, options]) 執行任務處理的檔案  globs：處理的檔案路徑(字串或者字串陣列)
//gulp.dest(path[, options]) 處理完後文件生成路徑

完整版Gulpfile處理js/css檔案：

"use strict";

var gulp = require("gulp"),//引入Gulp依賴
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json"),
    less = require("gulp-less"),
    path = require("path"),
    gulpSequence = require("gulp-sequence");

//正則匹配表示式
var regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/,
    less: /\.less$/
};

//任務
gulp.task("min", gulpSequence("less", ["min:js", "min:css", "min:html"]));

gulp.task('less', function () {
    return gulp.src('./Layout/Less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./wwwroot/css'));
});

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:html", function () {
    var tasks = getBundles(regex.html).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("watch", function () {
    gulp.watch('./Layout/Less/*.less', ['less']);

    getBundles(regex.js).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    getBundles(regex.css).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:css"]);
    });

    getBundles(regex.html).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:html"]);
    });
});

function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

然後執行

然後再資料夾中可檢視到，把所有的css、js自動壓縮到了min裡面。

此致，gulp構建 算是初步完成，後面還有很多可以優化的地方，具體可以參考： Gulp API文件