gulp--自动化构建工具学习笔记

gulp–基于流的自动化构建工具，可以很方便的压缩JS，CSS文件，压缩image图片，从而提高我们的网站访问性能，同时也能够实现js或css文件的合并。下面是它官网给的优势：

1.易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

2.构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

3.插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4.易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

下面是配置和使用步骤，开始使用gulp自动化构建工具,它依赖nodejs

1.安装配置gulp，放一张官网的入门指南图片，有相应的命令操作。



更过的配置和使用操作可到gulp官网上查看http://www.gulpjs.com.cn/

记录如何使用gulp构建一个项目

1.首先需要一个配置文件，对于基于express的nodejs工程，它在主目录下有package.json文件，如果是其他工程文件可使用npm init这个命令创建package.json。

2.对于创建的新项目，安装 gulp 到项目（防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容）

npm install gulp --save-dev

3.安装项目依赖插件

npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less
4000
gulp-ruby-sass gulp-imagemin gulp-util --save-dev

4.新建gulpfile.js配置文件，下面是我总结归纳的关于压缩js,css,image的任务，能够实现压缩全部或单个文件，实时监测单个文件的变化，js文件有错误时能够输出错误信息。代码中我做了详细的解释。

var gulp=require('gulp');
var gutil=require('gulp-util');//实现命令行输出带时间和颜色
var uglify=require('gulp-uglify');//压缩js
var watchPath=require('gulp-watch-path');//实时检查路径插件
var minifyCSS=require('gulp-minify-css');//压缩css插件
var rename=require('gulp-rename');//重命名插件
var imagemin=require('gulp-imagemin');//压缩image插件
var combiner = require('stream-combiner2');//捕获错误信息插件
var sourcemaps = require('gulp-sourcemaps');//map文件，方便chroe调试
var autoprefixer = require('gulp-autoprefixer');//解析css文件并且添加浏览器前缀到css规则

//捕获错误
var handleError = function (err) {
// console.log(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.cause.line));
gutil.log('message: ' + err.cause.message);
gutil.log('plugin: ' + colors.yellow(err.plugin));
}
//实时观察js变化，检测到某个js文件被修改时，只编写当前修改的文件
//压缩单个js文件
gulp.task('watchjs',function(){
gulp.watch('views/src/js/*.js',function(event){//event事件
var paths=watchPath(event,'views/src/js','views/dist/js');
/*
paths
{ srcPath: 'src/js/log.js',
srcDir: 'src/js/',
distPath: 'dist/js/log.js',
distDir: 'dist/js/',
srcFilename: 'log.js',
distFilename: 'log.js' }
*/
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(),
rename({suffix:'.min'}),
sourcemaps.write('./'),
gulp.dest(paths.distDir),
]);
combined.on('error',handleError);
})
});
//压缩全部JS
gulp.task('uglifyjs',function(){
gulp.src(['views/src/js/*.js','!views/src/js/*.min.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('views/dist/js'))
});
//压缩单个css文件
gulp.task('watchcss', function () {
gulp.watch('views/src/css/*.css', function (event) {
var paths = watchPath(event, 'views/src/', 'views/dist/');

gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
gutil.log('Dist ' + paths.distPath);

gulp.src(paths.srcPath)
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))
})
});
//压缩全部css
gulp.task('minifycss',function(){
gulp.src('views/src/css/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers:'last 2 versions'
}))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('views/dist/css'))
});
//压缩image图片
gulp.task('watchimages', function () {
gulp.watch('views/src/images/*.*', function (event) {
var paths = watchPath(event,'views/src/','views/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('images', function () {
gulp.src('views/src/images/*.*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('views/dist/images'))
});
//默认启动任务
gulp.task('default',['watchjs','watchcss','watchimages']);

5.命令行输入

gulp

，即可看到信息



6.关于合并js文件

//合并压缩js文件
gulp.task('script',function(){
//找到文件
gulp.src(['views/src/js/*.js','!views/src/js/*.min.js'])
//合并所有js到main.js
.pipe(concat('main.js'))
.pipe(gulp.dest('views/dist/js'))
//压缩文件
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
//另存压缩文件
.pipe(gulp.dest('views/dist/js'))
});

附一个gulp入门指南的连接，感觉写的挺好https://github.com/nimojs/gulp-book