使用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

这篇文章就到这里了，希望对你有所帮助。