下面是我gulpfile.js的代碼:
// 引入 gulp
var gulp = require('gulp');
// 引入組件
var htmlmin = require('gulp-htmlmin'), //html壓縮
imagemin = require('gulp-imagemin'),//圖片壓縮
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css壓縮
jshint = require('gulp-jshint'),//js檢測
uglify = require('gulp-uglify'),//js壓縮
concat = require('gulp-concat'),//文件合併
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息
// 壓縮html
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dest'))
.pipe(notify({ message: 'html task ok' }));
});
// 壓縮圖片
gulp.task('img', function() {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('./dest/images/'))
.pipe(notify({ message: 'img task ok' }));
});
// 合併、壓縮、重命名css
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dest/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dest/css'))
.pipe(notify({ message: 'css task ok' }));
});
// 檢查js
gulp.task('lint', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({ message: 'lint task ok' }));
});
// 合併、壓縮js文件
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dest/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
.pipe(notify({ message: 'js task ok' }));
});
// 默認任務
gulp.task('default', function(){
gulp.run('img', 'css', 'lint', 'js', 'html');
// 監聽html文件變化
gulp.watch('src/*.html', function(){
gulp.run('html');
});
// Watch .css files
gulp.watch('src/css/*.css', ['css']);
// Watch .js files
gulp.watch('src/js/*.js', ['lint', 'js']);
// Watch image files
gulp.watch('src/images/*', ['img']);
});
var gulp = require('gulp');
var concat = require('gulp-concat'); //- 多個文件合併爲一個;
var minifyCss = require('gulp-minify-css');
//- 壓縮CSS爲一行;
var rev = require('gulp-rev'); //- 對文件名加MD5後綴
var revCollector = require('gulp-rev-collector');
//- 路徑替換
gulp.task('concat', function() { //- 創建一個名爲 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])//- 需要處理的css文件,放到一個字符串數組裏
.pipe(concat('wap.min.css')) //- 合併後的文件名
.pipe(minifyCss()) //- 壓縮處理成一行
.pipe(rev()) //- 文件名加MD5後綴
.pipe(gulp.dest('./css')) //- 輸出文件本地
.pipe(rev.manifest()) //- 生成一個rev-manifest.json
.pipe(gulp.dest('./rev')); //- 將 rev-manifest.json 保存到 rev 目錄內
});
gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
.pipe(revCollector()) //- 執行文件內css名的替換
.pipe(gulp.dest('./application/')); //- 替換後的文件輸出的目錄
});
gulp.task('default', ['concat', 'rev']);