gulpfile.js var gulp = require('gulp')var gutil = require('gulp-util')var uglify = require('gulp-uglify')var minifyCss = require('gulp-minify-css')var combiner = require('stream-combiner2')var rename = require('gulp-rename')var concat = req
var gulp = require('gulp')
var gutil = require('gulp-util')
var uglify = require('gulp-uglify')
var minifyCss = require('gulp-minify-css')
var combiner = require('stream-combiner2')
var rename = require('gulp-rename')
var concat = require('gulp-concat') // 合并文件 --合并只是放一起--压缩才会真正合并相同样式
var imagemin = require('gulp-imagemin')
var htmlmin = require('gulp-htmlmin') //html压缩组件
var removeEmptyLines = require('gulp-remove-empty-lines'); //清除空白行,参考:https://www.npmjs.com/package/gulp-remove-empty-lines
/*
gulp——本地gulp
gulp-imagemin——图片压缩
gulp-rename----给文件重新命名
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况
*/
/* 定义错误打印的方法 */
var handleError = function(err) {
var colors = gutil.colors
console.log('\n')
gutil.log(colors.red('Error!'))
gutil.log('fileName: ' + colors.red(err.fileName))
gutil.log('lineNumber: ' + colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
}
gulp.task('script', function() { // script时自定义的
// 将文件的源路径和发布路径赋值给相应变量
var srcJsPath = 'static/js/*.js'
var destJsPath = 'dist/js/'
var combined = combiner.obj([
gulp.src(srcJsPath), // 获取文件源地址
concat('bundle.min.js'),
uglify(), // 执行压缩
// rename({suffix: '.min'}),
gulp.dest(destJsPath) // 将压缩的文件发布到新路径
])
combined.on('error', handleError) // 打印错误日志
})
// minifyCss
gulp.task('css', function() { //
// 将文件的源路径和发布路径赋值给相应变量
var srcCssPath = 'static/css/*.css'
var destCssPath = 'dist/css/'
var combined = combiner.obj([
// gulp.src(srcCssPath), // 获取文件源地址
gulp.src([
'./static/css/style.css',
'./static/css/core.css'
]),
minifyCss(), // 执行压缩
rename({
suffix: '.min'
}),
gulp.dest(destCssPath) // 将压缩的文件发布到新路径
])
combined.on('error', handleError) // 打印错误日志
})
// 图片文件
gulp.task('images', function() {
var destImagesPath = 'dist/images/'
gulp.src('./static/images/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, // 类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, // 类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, // 类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true // 类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest(destImagesPath))
})
// base64
var base64 = require('gulp-base64')
gulp.task('buildCss', function() {
return gulp.src([
'./static/css/style.css',
'./static/css/core.css'
]).pipe(base64({
baseDir: '', // 样式文件里面相对的目录
extensions: ['svg', 'png', /\.jpg#datauri$/i],
exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
maxImageSize: 5 * 1024, // bytes
debug: true
}))
.pipe(concat('bundle.min.css'))
.pipe(gulp.dest('./dist/css'))
})
// 删除对应的文件夹
var del = require('del')
gulp.task('clean', function(cb) {
del([
// 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
'dist/*',
// 我们不希望删掉这个文件,所以我们取反这个匹配模式
'!dist/deploy.json'
], cb)
})
//html压缩
gulp.task('html', function() {
var destPath = 'dist/'
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: false, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除
