*最近大概看了一下gulp觉得还是很不错的，从网上找了例子，加自己的一些东拼西凑，就把一个项目的gulp配置完成了
列出配置的package.json
{
"name": "gulp_demo",
"version": "1.0.0",
"description": "My gulp example for project",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.0",
"gulp-imagemin": "^2.3.0",
"gulp-less": "^3.0.3",
"gulp-minify-css": "^1.2.1",
"gulp-uglify": "^1.4.0",
"gulp-watch-path": "^0.1.0"
},
"devDependencies": {
"amd-optimize": "^0.6.0",
"colors": "^1.1.2",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-cache": "^0.3.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^2.3.0",
"gulp-less": "^3.0.3",
"gulp-minify-css": "^1.2.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "^1.4.0",
"gulp-util": "^3.0.6",
"gulp-watch-path": "^0.1.0",
"imagemin-pngquant": "^4.2.0",
"stream-combiner2": "^1.0.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zhanfang",
"license": "ISC"
}
解析安装的模块
//基础gulp
var gulp = require('gulp')
//gulp的工具，主要用来打印错误信息
var gutil = require('gulp-util')
//压缩js代码
var uglify = require('gulp-uglify')
//监听代码变化
var watchPath = require('gulp-watch-path')
//帮助调试
var sourcemaps = require('gulp-sourcemaps')
//压缩css代码
var minifycss = require('gulp-minify-css')
//自动补全功能，主要针对css
//eg: display:flex
//=>: -webkit-display:flex;-moz-display:flex;display-flex
var autoprefixer = require('gulp-autoprefixer')
//编译less文件
var less = require('gulp-less')
//压缩image
var imagemin = require('gulp-imagemin')
//这个主要是保证代码编写错误时，gulp不退出，并捕获到错误代码
var combiner = require('stream-combiner2')
//深度压缩png图片
var pngquant = require('imagemin-pngquant');
//利用缓存保证没有修改的不用重新压缩或者编译
var cache = require('gulp-cache');
gulpfile
var handlerError = function (err) {
var colors = gutil.colors;
console.log('\n');
gutil.log(colors.red('ERROR!'));
gutil.log("Filename: "+ colors.red(err.fileName));
gutil.log('linenum: '+ colors.red(err.lineNumber));
gutil.log('message: ' + err.message);
gutil.log('plugin: ' + colors.yellow(err.plugins));
}
gulp.task('watchjs', function () {
gulp.watch('public/**/*.js', function (event) {
var paths = watchPath(event,'public/','dist/');
/*
paths {srcPath: 'src/file.js',
srcDir: 'src/',
distPath: 'dist/file.node',
distDir: 'dist/',
srcFilename: 'file.js',
distFilename: 'file.node' }
*/
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
gutil.log('Dist ' + paths.distPath);
//帮助解决语法错误
var combined = combiner.obj([
gulp.src(paths.srcPath),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)]);
combined.on('error',handlerError);
});
});
gulp.task('watchcss', function () {
gulp.watch('public/css/**/*.css', function (event) {
var paths = watchPath(event, 'public/', 'dist/')
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
var combined = combiner.obj(
gulp.src(paths.srcPath),
sourcemaps.init(),
autoprefixer({
browsers: 'last 2 versions'
}),
minifycss(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)
);
combined.on('error',handlerError);
})
})
gulp.task('watchless', function () {
gulp.watch('public/less/**/*.less', function (event) {
var paths = watchPath(event, 'public/less/', 'dist/css/')
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
//// 1. 找到 less 文件
//gulp.src(paths.srcPath)
// // 2. 编译为css
// .pipe(less())
// // 3. 另存文件
// .pipe(gulp.dest('public/css'))
var combined = combiner.obj([
gulp.src(paths.srcPath),
less(),
gulp.dest('public/css')
])
combined.on('error', handlerError)
})
})
gulp.task('watchcopy', function () {
gulp.watch('public/fonts/**/*', function (event) {
var paths = watchPath(event)
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
gulp.src(paths.srcPath)
.pipe(gulp.dest(paths.distDir))
})
})
gulp.task('watchimage', function () {
gulp.watch('public/img/**/*', function (event) {
var paths = watchPath(event,'public/','dist/')
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
gulp.src(paths.srcPath)
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest(paths.distDir))
})
})
gulp.task('uglifyjs', function () {
var combined = combiner.obj([
gulp.src('public/js/**/*.js'),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest('dist/js/')]);
combined.on('error', handlerError)
});
//有时我们也需要一次编译所有 css 文件。可以配置 minifyss 任务
gulp.task('minifycss', function () {
var combined = combiner.obj([
gulp.src('public/css/**/*.css'),
sourcemaps.init(),
autoprefixer({
browsers: 'last 2 versions'
}),
minifycss(),
sourcemaps.write('./'),
gulp.dest('dist/css/')]);
combined.on('error', handlerError)
})
gulp.task('lesscss', function () {
var combined = combiner.obj([
gulp.src('public/less/**/*.less'),
less(),
gulp.dest('public/css')
]);
combined.on('error',handlerError);
//
//// 1. 找到 less 文件
//gulp.src('public/less/**/*.less')
// // 2. 编译为css
// .pipe(less())
// // 3. 另存文件
// .pipe(gulp.dest('public/css'))
})
gulp.task('image', function () {
var combined = combiner.obj([
gulp.src('public/img/**/*'),
imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}),
gulp.dest('dist/images')
])
combined.on('error',handlerError);
})
gulp.task('copy', function () {
gulp.src('public/fonts/**/*')
.pipe(gulp.dest('dist/fonts/'))
})
gulp.task('default',['image','uglifyjs','lesscss','minifycss','copy',
'watchjs','watchcss','watchimage','watchcopy','watchless' ]);