Gulp 第二節 合并、壓縮檔案

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');
var uglify = require('gulp-uglify');  //合并、壓縮js
var concat = require('gulp-concat');  //檔案合并

//定義任務 gulp.task(name,fn)  第一參數是任務名，第二個參數是執行任務内容
gulp.task('uglify-js',function(){
    gulp.src(['src/js/*.js'])    //gulp.src(path) 選擇檔案
        .pipe(concat('all.js'))  //表示src中設定的路徑全部合并處理
        .pipe(uglify({
            mangle:true,  //是否修改變量名
            compress:true,  //是否完全壓縮
            //preserveComments:all   //保留所有的注釋
        }))   //壓縮檔案
        .pipe(gulp.dest('dist/js'))    //壓縮後的方件路徑
})
/*定義任務 gulp.task(name,fn)  第一參數是任務名，第二個參數是執行任務内容*/
gulp.task('copy-js',function(){
    gulp.src(['src/lib/*.min.js'])    //gulp.src(path) 選擇檔案
        .pipe(uglify())   //壓縮檔案
        .pipe(gulp.dest('dist/lib'))    //壓縮後的方件路徑
})


/*定義任務  監聽index.html 啟動webserver*/
gulp.task('default',['watch','webserver']);

/*自定義任務  合并執行任務，當執行 gulp js時，會執行合并壓縮以及複制JS操作*/
gulp.task('js',['uglify-js','copy-js'])

gulp.task('watch',function(){
    gulp.watch(['index.html']);   //監聽html檔案變化
    gulp.watch('src/js/*.js',['uglify-js']);   //監聽js檔案變化
})     

gulp.task('webserver',function(){
   gulp.src('src/')   //該任務針對的檔案
        .pipe(webserver({    //該任務調用的子產品
            path:'/',
            host:'127.0.0.1',
            port:'8085',
            livereload: true, //自動重新整理
            direactoryListing:false, //指定目錄找到預設首頁
            open:true   //自動打開
        }));
})