使用GULP打包、压缩与打版本号

 这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单
 "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
这篇文章就到这里了,希望对你有所帮助。 

相关内容推荐