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']);