前言

　　現在的前端開發已經不再僅僅只是靜態網頁的開發了，日新月異的前端技術已經讓前端代碼的邏輯和交互效果越來越復雜，更加的不易於管理，模塊化開發和預處理框架把項目分成若幹個小模塊，增加了最後發布的困難，沒有一個統一的標準，讓前端的項目結構千奇百怪。前端自動化構建在整個項目開發中越來越重要。

　　在gulp安裝之前，必須先要有node的環境，因為gulp.js是基於node.js的。
　　所以先來安裝node (如果你已經有node環境了就可以跳過此布)
　　node安裝
? 　　Node.js安裝包及源碼下載地址為https://nodejs.org/en/download/ node安裝教程很多，此處不詳述
　　?安裝完成之後
?　　在命令行輸入

　　node -v

　　查看安裝版本

　　npm -v

　　查看npm 版本

　　gulp安裝

　　有了npm之後就可以執行

　　npm install gulp -g

　　就可以自如的使用gulp了

　接下來看下gulp的應用

??　　創建一個項目

　　1.監聽服務器文件

 1 gulp.task(‘serve‘,(cb)=>{
 2     if(!args.watch) return cb();
 3     var server = liveserver.new([‘--harmony‘,‘server/bin/www‘]);
 4     server.start();
 
 5     gulp.watch([‘server/public/**/*.js‘,‘server/views/**/*.ejs‘],function (file) {
 6         server.notify.apply(server,[file]);
 7     })
 8     //監聽需要重啟的文件
 9     gulp.watch([‘server/routes/**/*.js‘,‘server/app.js‘],function () {
10         server.start.bind(server)()
11     });
12    })
13 
14 此處需要引入一些包
15
 
 import gulp from ‘gulp‘;
16 import gulpif from ‘gulp-if‘;
17 import liveserver from ‘gulp-live-server‘;

　　2.監聽css文件

gulp.task(‘css‘,()=>{
    return gulp.src(‘app/**/*.css‘)
        .pipe(gulp.dest(‘server/public‘))
        .pipe(gulpif(args.watch,livereload()))
})
此處需要引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import livereload from ‘gulp-livereload‘;

　　3.監聽瀏覽器

import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import gutil from ‘gulp-util‘;
import args from ‘./util/args‘;

gulp.task(‘browser‘,(cb)=>{
    if(!args.watch) return cb();

    gulp.watch(‘app/**/*.js‘,[‘scripts‘]);
    gulp.watch(‘app/**/*.ejs‘,[‘pages‘]);
    gulp.watch(‘app/**/*.css‘,[‘css‘]);
});

　　4.監聽js

//引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import concat from ‘gulp-concat‘;  //文件拼接
import webpack from ‘webpack‘;      //打包
import gulpWebpack from ‘webpack-stream‘;
import named from ‘vinyl-named‘;        //重命名
import livereload from ‘gulp-livereload‘;       //自動刷新  熱更新
import plumber from ‘gulp-plumber‘; //處理文件信息流
import rename from ‘gulp-rename‘;       //重命名
import uglify from ‘gulp-uglify‘;       //壓縮js css
import {log,colors} from ‘gulp-util‘;       //命令行輸出
import args from ‘./util/args‘;         //對命令行參數進行解析


//創建一個任務
gulp.task(‘scripts‘,()=>{
    //打開
    return gulp.src([‘app/js/index.js‘])
        //處理錯誤
        .pipe(plumber({
            errorHandle:function () {

            }
        }))
        .pipe(named())
        .pipe(gulpWebpack({
            module:{
                loaders:[{
                    test:/\.js$/,
                    loader:‘babel-loader‘
                }]
            }
        }),null,(err,stats)=>{
        log(`Finished ‘${colors.cyan(‘scripts‘)}‘`,stats.toString({
            chunks:false
    }))
    })
        //指定路徑
    .pipe(gulp.dest(‘server/public/js‘))
        //重命名
    .pipe(rename({
        basename:‘cp‘,
        extname:‘.min.js‘
    }))
        //壓縮
    .pipe(uglify({compress:{properties:false},output:{‘quote_keys‘:true}}))
    .pipe(gulp.dest(‘server/public/js‘))
    .pipe(gulpif(args.watch,livereload()))

})

當然還有許多監聽，此處不一一例舉，但是思想則是相通的。
對於以上的監聽，有必要說明一下，在安裝包時 均使用

npm install *** --save-dev 

在安裝過程中可通過package.json查看變化。

前端自動構建工具-gulp