gulpfile.js:从开发到生产，功能有：压缩合并、添加版本号
var gulp = require('gulp'), //引入gulp核心文件包 concat = require('gulp-concat'), //- 多个文件合并为一个 minifyCss = require('gulp-minify-css'), //- 压缩CSS为一行 rev = require('gulp-rev'), //- 对文件名加MD5后缀 revCollector = require('gulp-rev-collector'), //- 路径替换 cleanCSS = require('gulp-clean-css'), //清除css uglify = require('gulp-uglify'), //- 压缩js为一行 rename = require('gulp-rename'), //重命名 jshint=require('gulp-jshint'), //js语法检查 htmlmin = require('gulp-htmlmin'), //html压缩 connect = require('gulp-connect'), //服务器包 less = require('gulp-less'); path = require('path'), domSrc = require('gulp-dom-src'), cheerio = require('gulp-cheerio'), gulpSequence = require('gulp-sequence'), imagemin = require('gulp-imagemin'),//图片压缩 notify = require('gulp-notify'), pngcrush = require('imagemin-pngcrush'), runSequence = require('run-sequence'), del = require('del'); //[开发使用] // 将less文件编译为css文件 gulp.task('less',function(){ gulp.src('app/less/*.less') .pipe(less()) .pipe(gulp.dest('app/css')); }) //监督任务一：less文件改变更新css文件 gulp.task('changeLess',function(){ gulp.watch('app/**/*.less',['less']); }) //开启服务器，并监听实时更新文件 gulp.task('serve',function(){ connect.server({ root:'app', livereload:true }); gulp.watch('app/**/*.*',['reload','changeLess']); }) //监督任务二：自动更新 gulp.task('reload',function(){ gulp.src('app/**/*.*') .pipe(connect.reload()); }); //[生产使用] //压缩,合并css 到对应目录下 gulp.task('minifycss', function() { return gulp.src('app/css/*.css') //需要操作的文件 .pipe(concat('main.css')) //合并所有css到main.css .pipe(gulp.dest('app/css')) //输出到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(cleanCSS({compatibility: 'ie7'})) //执行压缩 .pipe(gulp.dest('dist/css')); //输出文件夹 }); //压缩,合并 js到对应目录下 gulp.task('minifyjs', function() { return gulp.src('app/js/*.js') //需要操作的文件 .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('app/js')) //输出到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('dist/js')); //输出 }); //压缩html到对应目录下 gulp.task('minifyhtml', function() { return gulp.src('app/*.html') .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist')); }); //压缩img 到对应目录下 gulp.task('minifyimg', function() { return gulp.src('app/images/*') .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngcrush()] })) .pipe(gulp.dest('dist/images/')); }); //更改生产文件下引入css和js链接 gulp.task('newindex', function() { return gulp.src('dist/index.html') .pipe(cheerio(function ($) { $('script').remove(); $('link').remove(); $('body').append('<script src="js/main.min.js"></script>'); $('head').append('<link rel="stylesheet" href="css/main.min.css">'); })) .pipe(gulp.dest('dist/')); }); //一次性执行多个任务 gulp.task('allmini',['minifycss','minifyjs','minifyhtml','minifyimg']); //生产时只需要执行这一个任务'product' gulp.task('product',gulpSequence('allmini','newindex')); //生产使用基础上添加版本 //定义css、js源文件路径 var cssSrc = 'dist/css/*.css', jsSrc = 'dist/js/*.js'; //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revCss', function(){ return gulp.src(cssSrc) .pipe(rev()) .pipe(gulp.dest('view/css')) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css')); }); //js生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revJs', function(){ return gulp.src(jsSrc) .pipe(rev()) .pipe(gulp.dest('view/js')) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js')); }); //Html替换css、js文件版本 gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', 'dist/*.html']) .pipe(revCollector()) .pipe(gulp.dest('view')) .pipe(notify({ message: 'all task ok' })); }); //加版本 gulp.task('dev', function (done) { runSequence( ['revCss'], ['revJs'], ['revHtml'] ); }); //开发之前清除文件 gulp.task('clean', function (cb) { del([ // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西 'dist/**/*', 'view/**/*', 'rev/*', // 我们不希望删掉这个文件，所以我们取反这个匹配模式 ], cb); }); //任务排序打包 gulp.task('default', function (done) { runSequence( ['product'], ['dev'] ); });