gulp經常使用插件

gulp要安裝兩次，一次全局安裝，一次是項目裏安裝

npm install cnpm

cnpm install gulp -g

cnpm install gulp --save-dev

 

1. gulp-uglify

gulp-uglify壓縮js文件，刪除註釋，減少文件大小

gulp-uglify壓縮多個js文件

// 使用gulp-uglify壓縮javascript文件，減少文件大小
var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/index.js', 'src/js/detail.js']) // 多個文件以數組形式傳入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['jsmin']);

 壓縮src/js目錄下的全部js文件，除了test1.js和test2.js（**匹配src/js的0個或多個子文件夾）

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1, test2}.js']) // 多個文件以數組形式傳入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['jsmin']);

 排除混淆關鍵字

// 使用gulp-uglify壓縮javascript文件，減少文件大小
var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1, test2}.js']) // 多個文件以數組形式傳入
        .pipe(uglify({
            mangle: {except: ['require', 'exports', 'module', '$']} // 排除混淆關鍵字
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['jsmin']);

uglify其餘參數

// 使用gulp-uglify壓縮javascript文件，減少文件大小
var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1, test2}.js']) // 多個文件以數組形式傳入
        .pipe(uglify({
            mangle: true, // true 是否修改變量名
            compress: true, //true 是否徹底壓縮
            preserveComments: 'all' // 保留全部註釋
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['jsmin']);

 

2. gulp-concat

gulp-concat合併js文件，減小網絡請求

 

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('testConcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js')) // 合併後的文件
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['testConcat']);

 

3. gulp-autoprefixer

自動添加css瀏覽器兼容前綴

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
    gulp.src('src/css/demo01.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, // 是否美化屬性值
            remove: true    // 是否去掉沒必要要的前綴
        }))
        .pipe(gulp.dest('build/css'));
});

 

gulp-autoprefixer的browsers參數詳解 （傳送門）：

● last 2 versions: 主流瀏覽器的最新兩個版本

● last 1 Chrome versions: 谷歌瀏覽器的最新版本

● last 2 Explorer versions: IE的最新兩個版本

● last 3 Safari versions: 蘋果瀏覽器最新三個版本

● Firefox >= 20: 火狐瀏覽器的版本大於或等於20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球統計有超過5%的使用率

 

發現上面規律了嗎，相信這不難看出，接下來講說各瀏覽器的標識：

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile

 

4. gulp-less

 編譯less文件

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('testLess', function () {
    gulp.src('src/css/demo02.less')
    .pipe(less())
    .pipe(gulp.dest('build/css/'));
});

 

// 監聽事件，自動編譯less
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('testLess', function () {
    gulp.src('src/css/*.less')
    .pipe(less())
    .pipe(gulp.dest('build/css/'));
});

gulp.task('testWatch', function () {
    gulp.watch('src/css/*.less', ['testLess']); // 當前全部less文件發生改變時，調用testLess任務
});

gulp.task('default', ['testLess', 'testWatch']);

 

5. gulp-clean-css

壓縮css文件

// 監聽事件，自動編譯less
var gulp = require('gulp'),
    mincss = require('gulp-clean-css'),
    less = require('gulp-less'),
    //確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
    cssver = require('gulp-make-css-url-version');

gulp.task('mincss', function () {
    gulp.src('src/less/demo01.less')
        .pipe(less())
        .pipe(cssver()) //給css文件裏引用文件加版本號（文件MD5） background:url(../img/test.png?v=59ru42NDYXEBRjzdYoNlaw%3D%3D)
        .pipe(mincss({
            // 保留全部特殊前綴，好比autoprefixer生成的
            keepSpecialComments: '*'
        }))
        .pipe(gulp.dest('build/css/'));
});

gulp.task('default', ['mincss']);

 

6. gulp-rev

對 js/css 作md5加密處理

package.json

 

gulpfile.js

const gulp = require('gulp');
// 載入全部以gulp爲前綴的插件
const $ = require('gulp-load-plugins')();
const revCollector = require('gulp-rev-collector');

gulp.task('babelES6', () => {
    return gulp.src('es6/*.js')
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe($.rev())
        .pipe(gulp.dest('dist/es5/'))
        .pipe($.rev.manifest()) // 生成一個rev-manifest.json
        .pipe(gulp.dest('dist/rev/scripts')); // 將rev-manifest.json保存到rev目錄裏
});

gulp.task('watchBabel', () => {
    gulp.watch('es6/*.js', ['babelES6']); // 當文件發生改變時，執行babelES6任務
});

gulp.task('lessCompile', () => {
    return gulp.src('less/*.less')
        .pipe($.less())
        .pipe($.rev())
        .pipe(gulp.dest('dist/css/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

gulp.task('watchLess', function () {
    gulp.watch('less/*.less', ['lessCompile']);
});

// 替換html裏的引用路徑爲md5加密後的js/css
gulp.task('replaceHtml', ['babelES6', 'lessCompile'], () => { // 執行完babelES6和lessCompile之後再執行replaceHtml
    return gulp.src(['dist/rev/**/*.json', './index.html']) // 獲取rev-manifest和要替換的html
        //根據rev-manifest.json的規則替換html裏的路徑，因爲替換是根據rev-manifest.json規則來的，因此必定要先生成這個文件再進行替換
        .pipe(revCollector())
        .pipe(gulp.dest('./'));
});

gulp.task('default', ['watchBabel', 'watchLess', 'replaceHtml']);

 

7. gulp-clean

刪除目錄

const gulp = require('gulp');
// 載入全部以gulp爲前綴的插件
const $ = require('gulp-load-plugins')();
const revCollector = require('gulp-rev-collector');
const clean = require('gulp-clean');

gulp.task('clean', () => {
    return gulp.src('dist/')
        .pipe(clean());
});

gulp.task('babelES6', ['clean'], () => { // 執行babelES6以前clean一下
    return gulp.src('es6/*.js')
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe($.rev())
        .pipe(gulp.dest('dist/es5/'))
        .pipe($.rev.manifest()) // 生成一個rev-manifest.json
        .pipe(gulp.dest('dist/rev/scripts')); // 將rev-manifest.json保存到rev目錄裏
});

gulp.task('watchBabel', ['clean'], () => {
    gulp.watch('es6/*.js', ['babelES6', 'replaceHtml']); // 當文件發生改變時，執行babelES6任務
});

gulp.task('lessCompile', ['clean'], () => {
    return gulp.src('less/*.less')
        .pipe($.less())
        .pipe($.rev())
        .pipe(gulp.dest('dist/css/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

gulp.task('watchLess', ['clean'], function () {
    gulp.watch('less/*.less', ['lessCompile', 'replaceHtml']);
});

// 替換html裏的引用路徑爲md5加密後的js/css
gulp.task('replaceHtml', ['babelES6', 'lessCompile'], () => { // 執行完babelES6和lessCompile之後再執行replaceHtml
    return gulp.src(['dist/rev/**/*.json', './index.html']) // 獲取rev-manifest和要替換的html
        //根據rev-manifest.json的規則替換html裏的路徑，因爲替換是根據rev-manifest.json規則來的，因此必定要先生成這個文件再進行替換
        .pipe(revCollector())
        .pipe(gulp.dest('./'));
});

gulp.task('default', ['watchBabel', 'watchLess', 'replaceHtml']);