这篇文章讲我整理的一种打包项目的方式，以下是我的依赖清单
"devDependencies": {
"gulp": "^3.9.1",
"gulp-asset-rev": "0.0.15",
"gulp-clean-css": "^2.1.3",
"gulp-htmlmin": "^3.0.0",
"gulp-notify": "^2.2.0",
"gulp-uglify": "^2.0.0"
}
这里仅供参考，很多都已经有更新的版本了。如果不想自己下载的，可以npm install我的。
下载完毕后，找到node_modules --> gulp-assets-rev -->index.js 修改为如下代码：
var verStr = (options.verConnecter || "") + md5;
src=src+"?v="+verStr;
gulpfile.js:
先引用：
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var notify = require('gulp-notify');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var assetRev = require('gulp-asset-rev');
CSS压缩，输出
gulp.task('minifyCss', function() {
return gulp.src('src/css/*.css')
.pipe(assetRev())
.pipe(cleancss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'CSS文件压缩完毕' }));
});
压缩js文件，输出
gulp.task('minifyJs', function() {
return gulp.src('src/js/*.js')
.pipe(assetRev())
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'js文件混缩完毕' }));
});
HTML压缩，输出
gulp.task('minifyHtml',function() {
return gulp.src('src/*.html')
.pipe(assetRev())
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
.pipe(notify({ message: 'HTML文件压缩完毕' }));
});
整合
gulp.task('default', function(){
gulp.run('minifyCss', 'minifyJs','minifyHtml');
// 监听html文件变化
gulp.watch('src/*.html', function(){
gulp.run('minifyHtml');
});
//监听CSS文件变化
gulp.watch('src/css/*.css', function(){
gulp.run('minifyCss','minifyHtml');
});
//监听JS文件变化
gulp.watch('src/js/*.js', function(){
gulp.run('minifyJs','minifyHtml');
});
});
调用：
gulp
这篇文章就到这里了，希望对你有所帮助。