gulp压缩代码集成

一个grunt项目需要两个文件：package.json和gulpfile.js，前者用于nodejs包管理，比如插件安装，后者是gulp配置文件，配置任务或者自定义任务。

1.先生成一个package.json文件，在项目的目录下运行npm init就可以生成一个空的package.json。

2.sudo npm install gulp gulp-clean gulp-concat gulp-htmlmin  gulp-jshint  gulp-minify-css gulp-uglify    --save-dev

3.gulpfile

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2015-04-09 23:30:20
 * @version $Id$
 */

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var minifyCSS = require('gulp-minify-css'); //css压缩
var jshint = require('gulp-jshint'); //js检查
var uglify = require('gulp-uglify'); //js压缩
var livereload = require('gulp-livereload');
var clean = require('gulp-clean');
var htmlmin = require('gulp-htmlmin');


gulp.task('htmlMin', function() {
    return gulp.src('src/html/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/html'));
});


gulp.task('imageMin', function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{
                removeViewBox: false
            }],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images/'));
});

gulp.task('cssMin', function() {
    return gulp.src('src/css/*.css')
        .pipe(minifyCSS({
            keepBreaks: true
        }))
        .pipe(gulp.dest('dist/css'));
});


gulp.task('clean', function() {
    return gulp.src('dist', {
            read: false
        })
        .pipe(clean());
});

gulp.task('jsMin', function() {
    return gulp.src('src/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('jsHint', function() {
    return gulp.src('src/js/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});

gulp.task('min', ['clean'], function() {
    gulp.start('jsMin', 'cssMin', 'htmlMin', 'imageMin');
});