gulp對ES6、Less、image、html、監聽、實時重新整理的基本代碼

一、準備工作

1. 使用前需要使用npm包安裝好所用到的gulp插件，有以下插件需要依賴安裝到本項目中
2. 安裝 es6 和 less 所用到的編譯子產品
3. 配置es6編譯的檔案

   //建立檔案 .babelrc
   //鍵入以下内容
   {"presets":["es2015"]}
              

二、代碼部分（僅供參考學習，如有不對之處望批評指正）

let gulp = require('gulp'); //引入gulp子產品
let $ = require('gulp-load-plugins')(); //引入gulp加載的所有插件（需要本地安裝依賴所用到的插件）

//開啟一個任務（js:任務名稱），用于對JS檔案的處理
gulp.task('js', function () {
    //加上return之後，傳回一個stream（gulp.src對象），目的為了確定task在執行的時候能夠按照順序進行，并依次完成，然後注入
    return gulp.src(['./src/js/base.js', './src/js/index.js'])  //gulp.src() 指定源檔案
        .pipe($.babel()) //将es6代碼編譯成es2015
        .pipe($.concat('all.js')) //合并js代碼
        .pipe(gulp.dest('./build/js')) //将合并後的js代碼輸出到build/js目錄下
        .pipe($.uglify()) //進行壓縮JS檔案
        .pipe($.rename(function (path) { //修改壓縮後的檔案名稱，防止覆寫上邊的輸出
            // {filename:'all.js',basename:'base',extname:'js'}
            path.basename += '.min'; // 在basename的基礎上加上min，表示此檔案為同名稱檔案的壓縮版檔案
        }))
        .pipe(gulp.dest('./build/js')); //将壓縮後的檔案進行輸出到指定目錄
});

//開啟一個任務（css:任務名稱），對less檔案處理，并将less檔案處理後變成css檔案
gulp.task('css', function () {
    return gulp.src('./src/less/*.less')
        .pipe($.less()) //将less檔案編譯成css檔案
        .pipe($.concat('all.css')) //合并編譯後的css檔案，并指定名稱為all.css
        .pipe(gulp.dest('./build/css')) //輸出合并後的非壓縮版all.css檔案
        .pipe($.cleanCss()) //壓縮合并後的css檔案
        .pipe($.rename(function (path) {
            path.basename += '.min'
        }))
        .pipe(gulp.dest('./build/css'))
});


gulp.task('img', function () { //将img下的源檔案複制到build目錄下
    return gulp.src('./src/imgs/*').pipe(gulp.dest('./build/imgs'))
});

//開啟一個任務（index）
gulp.task('index', function () {
    let target = gulp.src('./src/index.html'); //聲明target儲存，gulp.src源檔案
    let sources = gulp.src(['./build/js/**/*.js', './build/css/**/*.css']); //聲明source，gulp.src儲存源資源檔案
    return target.pipe($.inject(sources, {ignorePath: 'build', addRootSlash: false})) //将資源檔案注入到html檔案裡，需要在index.html檔案裡，分别指定存放css檔案和js檔案的位置；inject（）這兩個參數，分别設定了忽略的路徑，因為導出後的index.html檔案需要引入css檔案和js檔案以便正常運作
        .pipe($.minifyHtml()) //對html檔案進行壓縮
        .pipe(gulp.dest('./build'))
        .pipe($.connect.reload()); //通知浏覽器自動重新整理（此方法配合視圖重新整理功能）
});

//建立一個http服務，并對服務進行配置
gulp.task('serve', function () {
    $.connect.server({
        port: , //指定端口号，在浏覽器中輸入localhost:8080就可以直接通路生成的html頁面
        root: './build', //指定html檔案起始的根目錄
        livereload: true //啟動實時重新整理功能（配合上邊的connect.reload()方法同步使用）
    });
});

//建立一個監聽，用于監聽源檔案index.html變化之後，及時通知其進行再次gulp index編譯，并實時通知浏覽器端視圖重新整理，做到自動重新整理功能
gulp.task('watch', function () {
    gulp.watch('./src/index.html', ['index']);
});

//default為gulp自動執行的任務，數組裡注冊的是，每個任務的執行（也叫default任務所依賴的任務），其中任務之間是有互相依賴關系的，是以在執行每個任務的時候用到了return，防止任務在執行的時候亂了亂了順序（一個任務才執行一點就開始下一個任務，這樣插入到最終的html檔案中，得不到我們想要的結果）
gulp.task('default', ['js', 'css', 'img', 'index', 'serve', 'watch']); //将任務組合起來執行