Gulp(一)

一.簡介

gulp 是基於 Nodejs 的自動任務運行器，能自動化地完成javascript/coffee/sass/less/html/image/css等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

在實現上， gulp 借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單.

 

二.配置文件

var gulp = require('gulp');
var del = require('del');//刪除文件/文件夾
var rev = require('gulp-rev');//對文件名加MD5後綴
var nano = require('gulp-cssnano');//刪除空白和註釋，而且壓縮代碼
var uglify = require('gulp-uglify');//經過UglifyJS來壓縮JS文件
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');//壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）
var revCollector = require('gulp-rev-collector');//路徑替換
var browserSync = require('browser-sync').create();//靜態文件服務器，同時也支持瀏覽器自動刷新
var gulpSequence = require('gulp-sequence');
var uncss = require('gulp-uncss');
var htmlmin = require('gulp-htmlmin');
var base64 = require('gulp-base64');
var changed = require('gulp-changed');
var postcss = require("gulp-postcss");//css預編譯器
var sprites = require('postcss-sprites').default;//CSS精靈
var autoprefixer = require('autoprefixer');//自動補全瀏覽器兼容性前綴
var cssgrace = require('cssgrace');//CSS後處理工具,hackIE

var SRC_DIR = './src/';
var PKG_DIR = './tmp/pkg/';
var REV_DIR = './tmp/rev/';
var DST_DIR = './dist/';
var UNCSS_REG = [/.advise/, /.block/, /.g-bd .m-view-2 .category li:nth-child/, /^.g-bd ul li .info/, /.hljs/];

gulp.task('clean', function() {
    return del(['dist', 'tmp']);
});

/*
 * 合併請求
 * <!-- build:css ../css/index.pkg.css --><!-- endbuild -->
 * <!-- build:js ../js/index.pkg.js --><!-- endbuild -->
 */
gulp.task('pkg', function() {
    return gulp.src(SRC_DIR + 'view/*.html')
        .pipe(useref())
        .pipe(gulp.dest(PKG_DIR + 'view/'));
});

/*
 * 移動非jpg/png資源到img文件夾
 * 
 */
gulp.task('move-img-other', function() {
    return gulp.src([SRC_DIR + 'img/**/*.*!(jpg|png)', SRC_DIR + 'component/img/**/*.*!(jpg|png)'])
        .pipe(gulp.dest('./tmp/pkg/img/'));
});

/*
 * 壓縮IMG
 * 
 */
gulp.task('min-img', function() {
    return gulp.src([SRC_DIR + 'img/**/*.*(jpg|png)', SRC_DIR + 'component/img/**/*.*(jpg|png)'])
        .pipe(imagemin())
        .pipe(gulp.dest('./tmp/pkg/img/'));
});

/*
 * 壓縮CSS(PC)
 * 
 */
gulp.task("min-css-pc", function() {
    // PostCSS
    var processors = [
        sprites({
            'stylesheetPath': PKG_DIR + 'css/',
            'spritePath': PKG_DIR + 'img/'
        }),
        autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
        }),
        cssgrace
    ];
    return gulp.src([PKG_DIR + 'css/**/*.css'])
        .pipe(nano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(postcss(processors))
        .pipe(gulp.dest(PKG_DIR + 'css/'))
});

/*
 * 壓縮CSS(Mobile)
 * 
 */
gulp.task("min-css-mobile", function() {
    // PostCSS
    var processors = [
        autoprefixer({
            browsers: ['> 1%', 'last 2 versions']
        })
    ];
    return gulp.src([PKG_DIR + 'css/**/*.css'])
        .pipe(uncss({
            html: [PKG_DIR + '**/*.html'],
            ignore: UNCSS_REG
        })).pipe(nano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(postcss(processors))
        .pipe(gulp.dest(PKG_DIR + 'css/'))
});

/*
 * 壓縮JS
 * 
 */
gulp.task('min-js', function() {
    return gulp.src(PKG_DIR + 'js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(PKG_DIR + 'js/'));
});

/*
 * 版本化IMG
 * 
 */
gulp.task('rev-img', function() {
    return gulp.src(PKG_DIR + 'img/**/*')
        .pipe(rev())
        .pipe(gulp.dest(REV_DIR + 'img/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest(REV_DIR + 'img/'));
});

/*
 * 版本化CSS
 * 
 */
gulp.task('rev-css', function() {
    return gulp.src(PKG_DIR + 'css/**/*')
        .pipe(rev())
        .pipe(gulp.dest(REV_DIR + 'css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest(REV_DIR + 'css/'));
});

/*
 * 版本化JS
 * 
 */
gulp.task('rev-js', function() {
    return gulp.src(PKG_DIR + 'js/**/*')
        .pipe(rev())
        .pipe(gulp.dest(REV_DIR + 'js/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest(REV_DIR + 'js/'));
});

/*
 * 收集圖片到CSS
 */
gulp.task('col-css', function() {
    return gulp.src([REV_DIR + 'img/*.json', REV_DIR + 'css/*.css'])
        .pipe(revCollector())
        .pipe(gulp.dest(DST_DIR + 'css/'));
});

/*
 * 移動IMG文件到目標文件夾
 */
gulp.task('col-img', function() {
    return gulp.src([REV_DIR + 'img/*', '!' + REV_DIR + '/img/*.json'])
        .pipe(gulp.dest(DST_DIR + 'img/'));
});

/*
 * 移動JS文件到目標文件夾
 */
gulp.task('col-js', function() {
    return gulp.src(REV_DIR + 'js/*.js')
        .pipe(gulp.dest(DST_DIR + 'js/'));
});

/*
 * 收集資源到HTML
 */
gulp.task('col-html', function() {
    return gulp.src([REV_DIR + '**/*.json', PKG_DIR + 'view/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin({
            // collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest(DST_DIR + 'view/'));
});

/*
 * 圖片base64
 */
gulp.task('base64', function() {
    return gulp.src(PKG_DIR + '/**/*.css')
        .pipe(base64({
            extensions: ['svg', 'png', /\.jpg#datauri$/i],
        }))
        .pipe(gulp.dest(PKG_DIR));
});


/*
 * 移動mock文件夾
 */
gulp.task('move-mock', function() {
    return gulp.src(SRC_DIR + 'mock/**/*')
        .pipe(gulp.dest(DST_DIR + 'mock/'));
});

/*
 * 靜態服務器
 */
gulp.task('bs', function() {
    browserSync.init({
        files: "**", //監聽整個項目
        open: "external",
        server: {
            baseDir: "./dist/",
            index: 'view/index.html'
        }
    });
});

/*
 * 靜態服務器(代理)
 */
gulp.task('bsp', function() {
    browserSync.init({
        proxy: "127.0.0.1"
    });
});

/*
 * PC打包方案
 */
gulp.task('pc', gulpSequence(
    'clean', 'pkg', 'min-img', 
    ['min-img', 'min-css-pc', 'min-js'], 'move-img-other', 
    ['rev-img', 'rev-css', 'rev-js'], 
    ['col-img', 'col-css', 'col-js', 'col-html'],
    'move-mock', 'bs'
));

/*
 * Mobile打包方案
 */
gulp.task('mobile', gulpSequence(
    'clean', 'pkg', 'min-img', 'base64', 'move-img-other',
    ['min-img', 'min-css-mobile', 'min-js'], 
    ['rev-img', 'rev-css', 'rev-js'], 
    ['col-img', 'col-css', 'col-js', 'col-html'],
    'move-mock', 'bs'
));


gulp.task('default', ['pc'], function() {
    return del(['tmp/']);
});