gulp前端自动化构建
gulp?
gulp是一个基于Node.js流(stream)的构建工具,可以快速构建项目并减少频繁的IO操作。
关于流的理解,我们可以把文件比作装水的桶,而水就是文件里的内容,我们用一根管子(pipe)连接两个桶使得水从一个桶流入另一个桶。
gulp? Grunt?
- 配置简单,易于学习
- 构建快速,基于Node.js流,不需要往磁盘写中间文件,可以更快地完成构建。
gulp 执行JS压缩
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('jsMin', function(){
return gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('js'));
});
Grunt 执行JS压缩
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
main: {
files: [{
expand: true,
cwd: 'js',
src: '*.js',
dest: 'assets/js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('jsMin', ['uglify']);
}
gulp使用
全局安装 gulp
$ npm install -g gulp
安装项目依赖
gulp同时需要作为项目开发依赖安装:
$ npm install --save-dev gulp
其他依赖根据需要安装,安装方式同上。
注意:如果未部署过项目可能会报错,需要先执行以下指令创建package.json
文件:
$ npm init
创建gulpfile.js
文件
在项目根目录下创建一个名为 gulpfile.js 的文件,例如:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
运行gulp
$ gulp
默认的名为default
的任务(task)将会被运行,想要单独执行特定的任务,请输入gulp <task>
。
API - 简单得不像实力派
- gulp.src
- gulp.dest
- gulp.watch - (只监听变化,新增文件无法监听,推荐使用
gulp-watch
插件替代) - gulp.task
详情访问:http://www.gulpjs.com.cn/docs/api/
总结
Gulp
相比于Grunt
有很多优点,比较直观的就是学习曲线平滑。比Grunt速度更快、配置更少。