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

這篇文章就到這里了，希望對你有所幫助。