一个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');
});