构建WEB前端开发环境

构建WEB前端开发环境（一）

vargulp
= require('gulp');

varless
= require('gulp-less');

varplugins
= require('gulp-load-plugins')();

varpngquant
= require('imagemin-pngquant');

gulp.task('default',function(){

gulp.src('less/zhanzhao.less').pipe(less()).pipe(gulp.dest('css/'));

gulp.src('less/liuqian.less').pipe(less()).pipe(gulp.dest('css/'));

gulp.src('less/student.less').pipe(less()).pipe(gulp.dest('css/'));

returngulp.src('less/company.less').pipe(less()).pipe(gulp.dest('css/'));

});

gulp.task('clean',function(){

returngulp.src('publish/').pipe(plugins.clean());

});

gulp.task('bulid',['clean'],function(){

gulp.src('favicon.ico').pipe(gulp.dest('publish/'));

gulp.src('download/**/*').pipe(gulp.dest('publish/download/'));

gulp.src('mail/**/*').pipe(gulp.dest('publish/mail/'));

gulp.src('statement/**/*').pipe(gulp.dest('publish/statement/'));

gulp.src('template/**/*').pipe(gulp.dest('publish/template/'));

gulp.src('css/**/*.css').pipe(plugins.minifyCss()).pipe(gulp.dest('publish/css/'));

gulp.src('scripts/**/*.js').pipe(plugins.uglify()).pipe(gulp.dest('publish/scripts/'));

returngulp.src('images/**/*').pipe(plugins.cache(plugins.imagemin({

optimizationLevel:5,

progressive:true,

svgoPlugins:[{removeViewBox:false}],

use:[pngquant()]

}))).pipe(gulp.dest('publish/images/'));

});

gulp.task("revision",['bulid'],function(){

gulp.src(['template/head-js.html','template/baidu.html']).pipe(plugins.concat('head-js.html')).pipe(gulp.dest('publish/template/'));

returngulp.src(['publish/css/*.css','publish/scripts/config.js','publish/images/**/*'],{base:'publish'})

.pipe(plugins.rev())

.pipe(gulp.dest('publish/'))

.pipe(plugins.rev.manifest({

merge:true

}))

.pipe(gulp.dest('publish/'));

});

gulp.task("publish",["revision"],function(){

varmanifestCss
= gulp.src("publish/rev-manifest.json"),

manifestDownload
= gulp.src("publish/rev-manifest.json"),

manifest
= gulp.src("publish/rev-manifest.json");

gulp.src('publish/css/*.css')

.pipe(plugins.revReplace({manifest:manifest}))

.pipe(gulp.dest('publish/css/'));

gulp.src('*.html')

.pipe(plugins.revReplace({manifest:manifestCss}))

.pipe(gulp.dest('publish/'));

gulp.src('publish/download/*.html')

.pipe(plugins.revReplace({manifest:manifestDownload}))

.pipe(gulp.dest('publish/download/'));

});

作用：

default， 主要是监听less变化生成css。

clean， 清除掉publish文件夹的内容

bulid，把源码移动到publish文件夹下面，对于一些类型的文件做处理，例如css的压缩，js的压缩，图片的压缩缓存等等。

revision，md5文件，根据html，css的引用来给相关的文件添加md5戳，生成新的md5戳文件，来保持文件更新。

publish，根据上面 revision生成的新的md5文件来做一次文件替换，替换里面js，css，image的引用路径。

参考：segmentfault.com/a/1190000006157372