1. 定义:自动化构建工具,基于nodejs的Transform Stream来实现文件处理,再进行输出。
2. 前端构建的优点:
1)自动更新静态文件的版本问题
2)通过控制文件顺序解决js及css文件的依赖问题
3)通过文件合并和文件压缩进行性能优化
4)通过添加css的vendor前缀、单元测试、代码分析、引用文件提升工作效率
3. gulp vs grunt
1)grunt配置复杂
2)grunt插件职责不单一
3)grunt临时文件目录多
4)grunt性能慢
Grunt | Gulp |
配置优先 | 代码优先 |
基于文件 | 基于流 |
已有插件多3900+插件 | 1000+插件 |
4. 4个API
1) gulp.src:获取文件,gulp.src(globs[,options])
2) gulp.dest:写入文件,gulp.dest(path[,options])
3) gulp.tasks:注册任务,gulp.task(name[,deps,fn])
4) gulp.watch:监控文件的改动,gulp.watch(globs[,opts],tasks) or gulp.watch(glob[,opts,cb])
5. 创建实例
1)安装nodejs:基于node环境
2)安装gulp:npm install -g gulp(Mac下经常前面需要加sudo)
gulp -v输出版本号则安装成功
3)在根目录下创建package.json用来做依赖管理
4)选择安装需要的依赖
npm install gulp-jshint gulp-sass gulp-concat gulp-strip-debug gulp-uglify gulp-rename --save-dev
5)在根目录下新增gulpfile.js文件,用来自动检测js代码的错误
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass , 会将 scss/文件夹下的 .scss 文件编译成 .css 文件放在 /css文件夹下
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并,压缩文件,将 js文件夹下的js文件合并压缩成 all.js 放在 /dist文件夹下
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化,有了监听,当你编写 js 或 sacc 文件时就会自动编译
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
6)运行带有gulp构建工具的项目:在命令行输入gulp <task><othertask>