1.簡(jiǎn)介

gulp是一款簡(jiǎn)單快捷的前端構(gòu)建工具，其使用簡(jiǎn)單安裝方便，主要運(yùn)用插件實(shí)現(xiàn)功能，如：打包js，html，css圖片等，還有合并js代碼，自動(dòng)運(yùn)行刷新界面等

2. 安裝

gulp是一款搭載在node的工具，請(qǐng)先行安裝node環(huán)境，網(wǎng)上有好多教程（我們直接安裝運(yùn)行g(shù)ulp）

• <code>npm i gulp -g</code> （全局安裝） <code>npm i gulp --save-dev</code> (當(dāng)前文件夾安裝并寫(xiě)入package.json文件)
• 命令行輸入 <code>gulp -v</code> 查看是否安裝成功

3.使用

• 首先需要一個(gè)主文件<strong>gulpfile.js</strong>用于定義相關(guān)功能和處理方法
• 方法主要有:

1.<code>glup.task()</code>用于創(chuàng)建任務(wù)，自定義任務(wù)名稱(chēng)

gulp.task(['name1',['name2'], function () {
    console.log('aaaaa');
})

2.<code>gulp.src()</code>用于指定處理文件的路徑(可用通配符，也可指定多個(gè)路徑文件)

gulp.src(['src/html/*.html','src/css/*.css'])

3.<code>gulp.pipe()</code>管道輸入把前一個(gè)輸出作為后一個(gè)輸入

gulp.pipe(less())

4.<code>gulp.dest(url)</code>用于處理task生成文件后的文件路徑

gulp.pipe(gulp.dest('src/css'))

5.<code>gulp.watch()</code>用于監(jiān)聽(tīng)任務(wù)的變化，方便管理任務(wù)

gulp.task('mywatch', function () {
    gulp.watch('src/**/*.less', ['taskless']);
});//用于堅(jiān)挺src下的所有l(wèi)ess文件并執(zhí)行taskless任務(wù)

4. 插件的安裝<em>請(qǐng)根據(jù)需要選擇官網(wǎng)插件</em>

• 如自動(dòng)刷新頁(yè)面插件<code>npm i gulp-livereload --save-dev</code>如下會(huì)自動(dòng)刷新界面

var gulp = require('gulp'),
       livereload = require('gulp-livereload');
gulp.task('test', function () {
      gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //該任務(wù)針對(duì)的文件
          .pipe(less()) //該任務(wù)調(diào)用的模塊
          .pipe(gulp.dest('src/css')) //將會(huì)在src/css下生成index.css
          .pipe(livereload());
});

5.詳細(xì)實(shí)例（gulpfile.js）

//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');//解析less文件
    htmlmin = require('gulp-htmlmin');//HTML壓縮
    //當(dāng)發(fā)生異常時(shí)提示錯(cuò)誤 確保本地安裝gulp-notify和gulp-plumber
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber');
    concat = require('gulp-concat');//合并js文件
    livereload = require('gulp-livereload');//刷新頁(yè)面

//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱(chēng)）
gulp.task('testLess', function () {
    gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //該任務(wù)針對(duì)的文件
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))//監(jiān)聽(tīng) 語(yǔ)法錯(cuò)誤好像也打包
        .pipe(less()) //該任務(wù)調(diào)用的模塊
        .pipe(gulp.dest('src/css')) //將會(huì)在src/css下生成index.css
        .pipe(livereload());
});
//打包htmlimn
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁(yè)面JS
        minifyCSS: true//壓縮頁(yè)面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});
// 打包圖片（可以深度壓縮但比較耗時(shí)在很多情況下我們只修改了某些圖片，沒(méi)有必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片，沒(méi)有修改的圖片直接從緩存文件讀取）
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

// 合并js文件測(cè)試
gulp.task('jsconcat',function () {
    gulp.src('src/js/*.js')
    .pipe(concat('combine.js'))
    .pipe(gulp.dest('dist/js'));
  })

// 監(jiān)聽(tīng)所有的less文件(得先編譯一下 然后啟動(dòng)監(jiān)聽(tīng))
gulp.task('testWatch', function () {
    gulp.watch('src/**/*.less', ['testLess']);
});

gulp.task('default',['jsconcat','testLess', 'testHtmlmin','testImagemin']); //定義默認(rèn)任務(wù)
 
//gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱(chēng) deps：依賴任務(wù)名稱(chēng) fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑```

>資源來(lái)源于網(wǎng)絡(luò)和自己的理解參考網(wǎng)站 
http://www.gulpjs.com.cn/ 
http://www.ydcss.com/archives/18