在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化，自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、部署文件生成，并监听文件在改动后重复指定的这些步骤。
得益于 Grunt 基于任务的设计模式，这些步骤可以很好的归类执行，让开发效率得到了一次提升，但杀敌 1000，得自损 800 啊，学习曲线有点高，Gruntfile配置任务很难理解，经常容易忘记。
Grunt.js 太复杂了，复杂到比使用和配置 Vim 都困难，之前写过得《前端自动化如何利用grunt优化项目？》，glup比较简单，配置逻辑便于理解，效率更高、健壮性更好。
Gulp构建系统
Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。
比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。
官网：http://gulpjs.com/
插件：http://gulpjs.com/plugins/ 或 http://npm.taobao.org/
一、Gulp安装
1.Gulp是基于Node.js构建的，所以要先安装node.js。
2.安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：
npm install -g gulp //全局安装
3.然后，在项目目录安装Gulp：
npm install --save-dev gulp
4.查看gulp是否安装成功
gulp -v
二、安装常用gulp插件
* sass的编译（gulp-ruby-sass） * 自动添加css前缀（gulp-autoprefixer） * 压缩css（gulp-minify-css） * js代码校验（gulp-jshint） * 合并js文件（gulp-concat） * 压缩js代码（gulp-uglify） * 压缩图片（gulp-imagemin） * 自动刷新页面（gulp-livereload） * 图片缓存，只有图片替换了才压缩（gulp-cache） * 更改提醒（gulp-notify） * 清除文件（del）
三、创建配置文件 gulpfile.js
在项目的根目录创建配置文件 gulpfile.js，Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest
// js/app.js：指定确切的文件名。
// js/*.js：某个目录所有后缀名为js的文件。
// js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
// !js/app.js：除了js/app.js以外的所有文件。
// *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。
//引入gulp插件node模块
var gulp = require(‘gulp‘),
sass = require(‘gulp-ruby-sass‘),
autoprefixer = require(‘gulp-autoprefixer‘),
//gminifycss = require(‘gulp-minify-css‘),
compass = require("gulp-compass"),
jshint = require(‘gulp-jshint‘),
sourcemaps = require(‘gulp-sourcemaps‘),
minicss = require(‘gulp-mini-css‘),
connect = require(‘gulp-connect‘),
rename = require(‘gulp-rename‘),
uglify = require(‘gulp-uglify‘),
imagemin = require(‘gulp-imagemin‘),
concat = require(‘gulp-concat‘),
livereload = require(‘gulp-livereload‘),
notify = require(‘gulp-notify‘);
//Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest
// 定义web模块,类似于全局的http-server
gulp.task(‘http-server‘, function() {
connect.server({
livereload: true
});
});
//gulp.task(name, fn)gulp模块的task方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。
gulp.task(‘uglify‘,function(){
//gulp.src(glob)返回了一个可读的stream，如此行返回了./js/*.js下的全部
gulp.src(‘./js/*.js‘)
.pipe(uglify())
//gulp.dest(glob)返回一个可写的stream，如此行是将文件流写入到 ./dist/js 里的对应路径下
.pipe(gulp.dest(‘./dist/js‘))
.pipe(notify({message:‘可以了 ok !‘}))
})
//压缩样式
gulp.task(‘mincss‘,function(){
gulp.src(‘./css/*.css‘)
.pipe(mincss())
.pipe(gulp.dest(‘./dist/js‘))
})
// 创建Compass任务
gulp.task(‘compass‘, function() {
gulp.src(‘./scss/**‘)
.pipe(compass({
comments: false,
css: ‘css‘,
sass: ‘scss‘,
image: ‘img‘
}));
});
//编译sass
gulp.task("sass",function(){
gulp.src(‘./scss/.scss‘)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(mincss())
.pipe(sourcemaps.write(‘/‘))
.pipe(gulp.dest(‘./css/*.css‘))
})
//检查js
gulp.task("jshint",function(){
gulp.src("./js/.js")
.pipe(jshint())
.pipe(jshint.reporter(‘default‘)); //导入到模块任务里面
})
// 合并、压缩文件
gulp.task(‘scripts‘, function() {
gulp.src(‘./js/*.js‘)
.pipe(concat(‘all.js‘))
.pipe(gulp.dest(‘./dist/js‘))
.pipe(rename(‘all.min.js‘))
.pipe(uglify())
.pipe(gulp.dest(‘./dist/js‘))
.pipe(livereload())
});
//压缩图片
gulp.task(‘imagemin‘,function(){
gulp.src(‘./image/*.*‘)
.pipe(imagemin())
.pipe(gulp.dest(‘./dist/image‘))
.pipe(notify({message:‘compress ok !‘}))
})
// 检测HTML变化并刷新
gulp.task("html",function(){
gulp.src(‘*.*‘)
.pipe(livereload());
})
//定义名为"watch"的任务
gulp.task(‘watch‘,function(){
gulp.watch(‘./image/*.*‘);
gulp.watch(‘./js/*.js‘);
gulp.watch(‘./css/*.css‘);
gulp.watch(‘./scss/*.scss‘);
})
//每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()入口），运行gulp的时候实际只是调用该任务（从而来调用其它的任务）
gulp.task(‘default‘,function(){
//gulp.run(tasks)表示运行对应的任务，这里表示执行名
gulp.run(‘uglify‘,‘imagemin‘,‘compass‘);
//执行‘watch‘监听任务
gulp.run(‘watch‘);
// 监听文件变化
gulp.watch([
‘*.*‘,
‘./scss/**‘,
‘./img/**‘,
‘./js/*.js‘], function() {
livereload.listen();
gulp.run(‘compass‘, ‘lint‘, ‘html‘, ‘sass‘,‘imagemin‘,‘scripts‘);
});
})
四、运行gulp
通过gulp+任务名称，就可以运行gulp例
gulp watch
参考资料：Gulp.js 参考手册，自动化构建利器
时间： 2024-11-07 19:09:39