前端工具gulp2

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

2）gulp顺序执行任务