阅读 237

配置gulp进行es6开发,包括es6、压缩图片、编译less、压缩css、自动添加版本号,和热更新的功能

百度了一圈,想要在PC端进行ES6开发,都没有找到相关的脚手架工具。后来想起还有gulp这样的东西,所以就动手配置了一个关于在gulp进行开发的自动化工具。这份配置文件包括了,es6、压缩图片、编译less、压缩css、自动添加版本号,和热更新的功能。 __注:项目地址: github.com/gentlefung/…这里有更详尽的用法

var gulp = require('gulp'),
    less = require('gulp-less'),
    assetRev = require('gulp-asset-rev'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    clean = require('gulp-clean'),
    pump = require('pump'),
    changed = require('gulp-changed'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require("browser-sync").create(),
    source = require('vinyl-source-stream'),
    sourcemaps = require('gulp-sourcemaps'),
    glob = require('glob'),
    es = require('event-stream'),
    babel = require('gulp-babel'),
    browserify = require('browserify');
复制代码

/* 添加版本号的主要思路是

 css添加版本号:
在src目录下把less文件编译成css,压缩,发布到dist目录下。然后给dist目录下真正生成的css文件添加hash值。生成的hash文件在rev目录下一一对应
最后使用revHtml,html文件里面的引入的css添加版本号

js添加版本号:

1、在src目录下把js文件 压缩,es6转换,发布到dist目录下。

2、然后利用browserify将解析后的ES5代码合并,转变成可供浏览器识别的import、exprot,之类的方式。其中pages的js文件是通过识别各种import、export最终生成合并后的js.

(如果我们使用了ES6中的 module,通过 import、export 进行模块化开发,那么通过babel转码后, import 、 export 将被转码成符合CMD规范的 require 和 exports 等,但是浏览器还是不认识,这时可以使用 bowserify 对代码再次进行构建)

3、最后给dist目录下真正生成的js文件添加hash值。生成的hash文件在rev目录下一一对应
最后使用revHtml,html文件里面的引入的js添加版本号

*/
复制代码
//定义css、js源文件路径
var lessSrc = 'src/css/*.less',
    cssMinSrc = 'dist/css/*.css',
    jsSrc = 'src/js/*.js',
    jsMinSrc = 'dist/js/*.js',
    //imgMinSrc = 'dist/images/*.{png,jpg,jpeg,gif,ico}',    //这是导致无法给图片添加版本号时所用的路径
    imgSrc = 'src/images/*.{png,jpg,jpeg,gif,ico}', //这是修改后的路径
    htmlSrc = 'src/view/*.html';



/**
   处理css
**/

gulp.task('less', function() {
    return gulp.src(lessSrc) //该任务针对的文件
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        // 编译less
        .pipe(less()) //该任务调用的模块
        .pipe(minifyCss({
            compatibility: 'ie7'
        })) //压缩css
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            remove: false
        }))
        .pipe(gulp.dest('dist/css')) //编译后的路径
        .pipe(browserSync.reload({
            stream: true
        }));
});

//为css文件中引入的图片/字体等添加hash编码
gulp.task('assetRev', function() {
    return gulp.src('dist/css/*.css') //该任务针对的文件
        .pipe(assetRev()) //该任务调用的模块
        .pipe(gulp.dest('dist/css')); //为css中引入的图片/字体等添加hash编码后的路径
});


//CSS生成文件hash编码并生成rev-manifest.json文件名对照映射
gulp.task('revCss', function() {
    return gulp.src('dist/css/*.css')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});




/**
   处理js
**/


// 压缩 js 文件
gulp.task('uglify', function() {
    // 1 找到文件
    return gulp.src('src/js/**/*.js')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        // 生成sourcemaps
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        // 2 转换es6为es5
        .pipe(babel({
            presets: ['es2015']
        }))
        // 3 压缩文件
        .pipe(uglify({
            mangle: false
        }))
        // 结束sourcemaps
        .pipe(sourcemaps.write())
        //4 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
})


// 将 转化成es6,编译可以供浏览器使用的js,这里主要遍历了pages页面下的js文件。因为所有的这里的js是最终使用的实际使用的js
gulp.task('browser', function(done) {
    // glob为遍历文件函数
    glob('dist/js/pages/*.js', function(err, files) {
        if (err) done(err);
        var tasks = files.map(function(entry) {
            return browserify({
                    entries: [entry]
                })
                
                .bundle()
                .pipe(source(entry))
                .pipe(changed('dist', {
                    hasChanged: changed.compareSha1Digest
                }))
                // .pipe(rename({
                //  extname: '.bundle.js'
                // }))
                // 这的目录是相对于‘dist/js/pages/*.js’
                .pipe(gulp.dest(''))
                .pipe(browserSync.reload({
                    stream: true
                }))
        });
        es.merge(tasks).on('end', done);
    })
});


//js生成文件hash编码并生成rev-manifest.json文件名对照映射 目录结构为dist/js/index.js
gulp.task('revJs', function() {
    return gulp.src(jsMinSrc)
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


//js生成文件hash编码并生成rev-manifest.json文件名对照映射 目录结构为dist/js/lib/lib.js
gulp.task('revJs2', function() {
    return gulp.src('dist/js/**/*.js')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



/**
   处理图片
**/
gulp.task('imageMin', function() {
    gulp.src('src/images/*.{png,jpg,jpeg,gif,ico}')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



/**
   处理html,压缩
**/
gulp.task('htmlMin', function() {
    var options = {
        collapseWhitespace: true, //从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大。
        collapseBooleanAttributes: true, //省略布尔属性的值,比如:<input checked="checked"/>,那么设置这个属性后,就会变成 <input checked/>。
        removeComments: true, //清除html中注释的部分,我们应该减少html页面中的注释。
        removeEmptyAttributes: true, //清除所有的空属性。
        removeScriptTypeAttributes: true, //清除所有script标签中的type="text/javascript"属性。
        removeStyleLinkTypeAttributes: true, //清楚所有Link标签上的type属性。
        minifyJS: true, //压缩html中的javascript代码。
        minifyCSS: true //压缩html中的css代码。
    };
    return gulp.src(htmlSrc)
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/view'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


//Html替换css、js文件版本,这是
gulp.task('revHtml', function() {
    return gulp.src(['rev/**/*.json', 'dist/view/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('dist/view'));
});


/**
   删除任务
**/

gulp.task('clean', function(cb) {
    pump([
        gulp.src('dist'),
        clean()
    ], cb)
})


// 打包到真的项目中去
gulp.task('build', function(done) {
    //condition = false;
    runSequence( //此处不能用gulp.run这个最大限度并行(异步)执行的方法,要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
        'clean',
        'less',
        'assetRev',
        'revCss',
        'uglify',
        'browser',//如果不需要es6环境的开发,直接注释这行就可以,js文件可以按照不是es6开发编写
        'revJs',
        'revJs2',
        'imageMin',
        'htmlMin',
        'revHtml',
        done);
});


// 配置给热更新用,防止过多任务,卡死

gulp.task('dev', function(done) {
    //condition = false;
    runSequence( //此处不能用gulp.run这个最大限度并行(异步)执行的方法,要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
        'less',
        'uglify',
        'imageMin',
        'htmlMin',
        done);
});

/*
热更新
给每个任务开头添加
 .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
结尾添加

 .pipe(browserSync.reload({
            stream: true
        }));


然后启动下面  serve任务
*/
gulp.task('serve', function() {
    gulp.start('dev');
    browserSync.init({
        port: 2017,
        server: {
            baseDir: ['dist']
        }
    });
    gulp.watch('src/js/*.js', ['dev']); //监控文件变化,自动更新  
    gulp.watch('src/css/*.less', ['dev']);
    gulp.watch('src/view/*.html', ['dev']);
    gulp.watch('src/images/*.*', ['dev']);
});


gulp.task('default', ['serve']);
复制代码
评论