打包壓縮js,css,支援sass編譯成css,圖片壓縮，圖片組建成精靈圖，靜態檔案拷貝，實時監聽變化自動重新整理瀏覽器
//引入相關外掛
var gulp = require('gulp');
var rename = require('gulp-rename');   //檔案重新命名
var uglify = require('gulp-uglify');   //JS程式碼壓縮
var minCSS = require('gulp-clean-css'); //CSS程式碼壓縮
var autoprefixer = require('gulp-autoprefixer');  //新增瀏覽器字首
var clean   = require('gulp-clean');     //清空檔案
var cleanDest = require('gulp-clean-dest'); //清空dist目錄指定檔案
var changed = require('gulp-changed');  //僅僅傳遞更改過的檔案
var imagemin = require('gulp-imagemin');  //圖片壓縮
var spritesmith = require('gulp.spritesmith');  //PNG圖片合併成精靈圖
const filter = require('gulp-filter');   //js壓縮過濾器，排除已壓縮過的
var sass = require('gulp-sass');  //處理sass檔案
var browserSync = require('browser-sync'); //擁有實時過載伺服器
var reload = browserSync.reload;  //編譯後重新重新整理瀏覽器
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');

var pageSrc = 'src/pages/**/*.html';
var pageDist = 'dist/pages/';
var jsSrc = 'src/js/**/*.js';
var jsDist = 'dist/js/';
var cssSrc = 'src/css/**/*.css';
var cssDist = 'dist/css/';
var sassSrc = 'src/sass/**/*.scss';
var sassDist = 'src/css/';
var imgSrc = 'src/images/*';
var imgDist = 'dist/images/';
var iconfontSrc = 'src/iconfont/*';
var iconfontDist = 'dist/iconfont/';
var staticSrc = 'src/static/*';
var staticDist = 'dist/static/';
var spriteSrc = 'src/images/*.png';
var spriteDist = 'src/images/sprite';

gulp.task('html', function() {  //拷貝html
    return gulp.src(pageSrc)
        .pipe(changed(pageDist))
        .pipe(cleanDest(pageDist))//先清空後生成
        .pipe(gulp.dest(pageDist))
        .pipe(reload({ stream:true }));
});

//對已經壓縮過的檔案進行過濾，不再壓縮
var  jsFilter = filter([jsSrc, '!src/js/**/*.min.js'], {restore: true});
gulp.task('js', function() {  //拷貝壓縮js
    return gulp.src(jsSrc)
        .pipe(changed(jsDist))
        .pipe(cleanDest(jsDist))//先清空後生成
        .pipe(jsFilter)
        // 這會輸出一個未壓縮過的版本
        .pipe(gulp.dest(jsDist))
        // 這會輸出一個壓縮過的並且重新命名未 foo.min.js 的檔案
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest(jsDist))
        .pipe(reload({ stream:true }));
});
gulp.task('css', function() {  //拷貝壓縮css
    return gulp.src(cssSrc)
        .pipe(changed(cssDist))
        .pipe(cleanDest(cssDist))//先清空後生成
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        // 這會輸出一個未壓縮過的版本
        .pipe(gulp.dest(cssDist))
        .pipe(minCSS())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(cssDist))
        .pipe(reload({ stream:true }));
});
gulp.task('sass', function () {  //將sass檔案編譯成css
    return gulp.src(sassSrc)
        .pipe(changed(sassSrc))
        .pipe(cleanDest(sassDist))//先清空後生成
        .pipe(sass())
        .pipe(gulp.dest(sassDist))
        .pipe(reload({ stream:true }));
});

gulp.task('img', function() {  //拷貝壓縮圖片
    return gulp.src([imgSrc,'src/images/**/*'])
        .pipe(changed(imgSrc))
        .pipe(cleanDest(imgDist))//先清空後生成
        // 這會輸出一個未壓縮過的版本
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest(imgDist))
        .pipe(reload({ stream:true }));
});
gulp.task('sprite', function () {  //產出精靈圖

   /*  //img,css產出的路徑相同時
   var spriteData = gulp.src(spriteSrc).pipe(cleanDest(spriteDist)).pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));
    return spriteData.pipe(gulp.dest(spriteDist));*/
    var spriteData = gulp.src(spriteSrc)
        .pipe(cleanDest(spriteDist))
        .pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));

    //設定打包的圖片路徑
    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(gulp.dest(spriteDist));
    //設定打包的css路徑
    var cssStream = spriteData.css
        .pipe(gulp.dest('src/css/sprite'));

    return merge(imgStream, cssStream);
});

gulp.task('ifont', function () {  //拷貝圖示字型
    return gulp.src(iconfontSrc)
        .pipe(changed(iconfontDist))
        .pipe(cleanDest(iconfontDist))//先清空後生成
        .pipe(gulp.dest(iconfontDist))
        .pipe(reload({ stream:true }));
});
gulp.task('static', function () {  //拷貝靜態資源，如json資料
    return gulp.src(staticSrc)
        .pipe(changed(staticDist))
        .pipe(cleanDest(staticDist))//先清空後生成
        .pipe(gulp.dest(staticDist))
        .pipe(reload({ stream:true }));
});

//清除dist目錄
gulp.task('clean', function () {
    return gulp.src('dist', {read: false})
        .pipe(clean());
});

//初始化時，批量執行多個操作
gulp.task('build', ['html','sass', 'css','js','sprite','img','ifont','static']);

//開啟本地伺服器監視檔案改動
gulp.task('serve', function() {
    browserSync({
        open:false,
        server: {
            baseDir: 'dist',
            index : "/pages/index.html"  //將dist目錄下的index.html作為入口頁面訪問
        }
    });
});

//啟動專案，命令:gulp start ,
// 瀏覽器訪問地址:http://localhost:3000/pages/index.html
gulp.task('start',['clean'], function() {
    gulp.start(['build','serve']);
    gulp.watch(pageSrc, ['html']);
    gulp.watch(sassSrc, ['sass']);
    gulp.watch(cssSrc, ['css']);
    gulp.watch(jsSrc, ['js']);
    gulp.watch('src/images/*.png', ['sprite']);
    gulp.watch(imgSrc, ['img']);
    gulp.watch(iconfontSrc, ['ifont']);
    gulp.watch(staticSrc, ['static']);
});


gulp.task('tojsp', function() {  //新增jsp檔案
    return gulp.src('dist/pages/**/*.html')
           .pipe(rename({ extname: '.jsp' }))
           .pipe(gulp.dest('dist/views/'))
});


說明：使用 
 
BrowserSync 和 gulp，你可以輕鬆地建立一個開發伺服器，然後同一個 WiFi 中的任何裝置都可以方便地訪問到。BrowserSync 同時集成了 live-reload 所以不需要另外做配置了。開啟一個瀏覽器，訪問預設的 URL (http://localhost:3000)

當前案例的目錄結構為：（目錄粗略圖，詳細圖）

注：當你啟動專案後直接瀏覽器輸入http://localhost:3000時可能返回的頁面資訊是:Get Error，排除了專案配置錯誤及程式碼書寫錯誤後，該錯誤可能是你的訪問地址沒有進入到指定頁面，倘若你的專案目錄結構比較複雜，主頁面不是直接暴露在外面，此時你需要在地址後面補充訪問的頁面路徑，例如我這邊的訪問時: