var gulp = require('gulp'); var less = require('gulp-less'); var htmlmin = require('gulp-htmlmin'); var imagemin = require('gulp-imagemin'); var cssmin = require('gulp-cssmin'); var rename = require('gulp-rename'); //生成的路径、文件夹 var dist = 'dist/'; //需要监控的文件定义为一个对象 var source = { less: ['src/less/*.less'], css:[dist+'origin/*.css'], images: ['src/images/*.{png,jpg,gif,ico,jpeg}'], html: ['src/*.html'] }; gulp.task('testCssmin',function() { gulp.src(source.less) //多个文件以数组形式传入 .pipe(less()) .pipe(gulp.dest(dist+'css/origin')) .pipe(cssmin()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest(dist+'css/')); }); gulp.task('testImagemin', function () { gulp.src(source.images) .pipe(imagemin({ // optimizationLevel: 3, //类型:Number 默认:3 取值范围:0-7(优化等级) // progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 // interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 // multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest(dist+'images')); }); gulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; gulp.src(source.html) .pipe(htmlmin(options)) .pipe(gulp.dest(dist)); }); //package gulp.task('package', ['testImagemin','testCssmin','testHtmlmin'],function () { console.log('package finish ...') }) //watch gulp.task('watch', function() { return gulp.watch([source.html,source.less,source.images], ['testImagemin','testCssmin','testHtmlmin']); });
今天就贴一个我用的配置文件,gulpfile.js:
说明:
1.gulp的一个问题是合并task,上面的package任务就合并了以下的所任务。gulp同步执行任务这块,关于这方面更深的讨论参见:
1)http://blog.csdn.net/mrhaoxiaojun/article/details/51907132