通用版gulp

gulpfile.js內容

const gulp = require('gulp');
// 壓縮css文件
const cssmin = require('gulp-clean-css');
// 壓縮html，能夠壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操做
const htmlmin = require('gulp-htmlmin');
// 只操做有過修改的文件
const changed = require('gulp-changed');
// 壓縮javascript文件，減少文件大小
const uglify = require('gulp-uglify');
// 文件清理
const clean = require('gulp-clean');
// es6轉es5
const babel = require('gulp-babel');
// 加版本號
const assetRev = require('gulp-asset-rev');

// 使用gulp-htmlmin壓縮html
gulp.task('htmlminTask', function () {
var options = {
removeComments: true, // 清除HTML註釋
collapseWhitespace: true, // 壓縮HTML
collapseBooleanAttributes: true, // 省略布爾屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, // 刪除全部空格做屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // 刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, // 刪除<style>和<link>的type="text/css"
minifyJS: true, // 壓縮頁面JS
minifyCSS: true // 壓縮頁面CSS
};
gulp.src('src/index.html')
.pipe(changed('dist'))
.pipe(assetRev())
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/'))
gulp.src('src/html/*.html')
.pipe(changed('dist'))
.pipe(assetRev())
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'))
})
// 使用gulp-clean-css壓縮css文件
gulp.task('cssminTask', function() {
var option = {
advanced: true,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//類型：Boolean 默認：false [是否保留換行]
keepSpecialComments: '*'//保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
}
gulp.src('src/style/*.css')
.pipe(assetRev())
.pipe(cssmin(option)) // 壓縮css
.pipe(gulp.dest('dist/style/')) // 將會在dist/css下生成index.css
})
// 使用gulp-uglify壓縮javascript文件，減少文件大小。
gulp.task('uglifyTask', function () {
gulp.src(['src/js/*.js'])
.pipe(assetRev())
.pipe(changed('dist/js')) // 對應匹配的文件
.pipe(babel({
presets: ['es2015'] // es5檢查機制
}))
// .pipe(uglify()) // 使用uglify進行壓縮，並保留部分註釋
.pipe(gulp.dest('dist/js/'));
});
// 文件複製
gulp.task('copyTask', function () {
gulp.src('src/favicon.ico')
.pipe(gulp.dest('dist/'))
gulp.src('src/img/*')
.pipe(gulp.dest('dist/img/'))
gulp.src('src/img/about_us/*')
.pipe(gulp.dest('dist/img/about_us'))
gulp.src('src/img/active-img/*')
.pipe(gulp.dest('dist/img/active-img'))
gulp.src('src/img/footer/*')
.pipe(gulp.dest('dist/img/footer'))
gulp.src('src/img/index/*')
.pipe(gulp.dest('dist/img/index'))
gulp.src('src/img/zhaopin_img/*')
.pipe(gulp.dest('dist/img/zhaopin_img'))
gulp.src('src/fonts/*')
.pipe(gulp.dest('dist/fonts'))
})

// 清理文件
gulp.task('cleanTask', function() {
var stream = gulp.src( 'dist', {read: false} ) // 清理maps文件
.pipe(clean())
return stream
})
// 打包
gulp.task('dev',['cleanTask','htmlminTask', 'copyTask', 'cssminTask','uglifyTask'])

 

 

package.json

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-asset-rev": "0.0.15",
"gulp-babel": "^7.0.1",
"gulp-changed": "^3.1.0",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.8.0",
"gulp-copy": "^1.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-uglify": "^3.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}