相较于 grunt 更高效,异步多任务,更易于使用,插件高质量
特点:
任务化: 不管什么事情,首先注册一个任务
基于流: 基于数据流,gulp 有自己的内存
会读你本地文件输入流到内存
在内存里操作完文件后,再从 gulp 内存输出流到本地
关键字:
glob
匹配模式,或者说匹配模式的数组(array of globs)的文件
glob
请参考 node-glob 语法 或者,你也可以直接写文件的路径
返回一个 Vinyl files 的 stream ,它可以被 piped 到别的插件中
-
gulp.src('client/templates/*.jade') .pipe(jade()) .pipe(minify()) .pipe(gulp.dest('build/minified_templates'));
1. gulp API 文档
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name[, deps], fn)
gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])
2. gulp 插件
3. 基本项目架构
4. 安装 gulp
sudo npm install -g gulp
sudo npm install --save-dev gulp
5. 创建并配置 gulpfile.js
6. 常用插件
7. 配置 js 文件合并压缩插件
① npm install --save-dev 插件
② 引入插件
③ 注册任务
④ gulp 执行生成目标文件
gulp 的任务即可以同步,也可以异步。。。异步,意味着两个任务 可能同时开启
- 当 task 的 function 写 return 时,任务就是异步的。。。否则任务是同步执行的
- return 还可以使得内存及时释放
这样一来,就存在这样一个问题:
得确保 所有的 less 都已经编译成了 css,才能开启 合并压缩 css 任务,
解决:
指定任务的依赖任务,该任务就会在依赖任务完成后,才会开始执行
(1) 文件合并、压缩、重命名
- sudo npm install --save-dev gulp gulp-concat gulp-uglify gulp-rename
编写 gulpfile.js
然后执行 gulp js 生成目标 js,此时,可以在 html 引入使用
(2) less 编译
- sudo npm install --save-dev gulp-less gulp-clean-css
编写 gulpfile.js
然后执行 gulp js 生成目标js
此时,可以在 html 引入使用
(3) html 文件压缩
- sudo npm install --save-dev gulp-htmlmin
(4) 半自动 热更新
- sudo npm install --save-dev gulp-livereload
(5) 全自动 热更新
- sudo npm install --save-dev gulp-connect
内置一个微型服务器
(6) 自动打开浏览器 访问指定链接
- sudo npm install --save-dev open
(7)
sudo npm install --save-dev gulp-load-plugins
改写成
此时,所有方法,都在 $ 这个对象里,使用时如下:
需要注意的是:
gulp-htmlmin 使用时,是 $.htmlmin 而非 $.htmlMin
gulp-clean-css 使用时,是 $.cleanCss 而非... ...
8. 项目架构:
9. 项目代码
gulpfile.js
-
var gulp = require('gulp'); var $ = require('gulp-load-plugins')()//引入的是函数,调用以后返回的是对象 // var concat = require('gulp-concat'); // var rename = require('gulp-rename'); // var uglify = require('gulp-uglify'); // var less = require('gulp-less'); // var cssClean = require('gulp-clean-css'); // var htmlMin = require('gulp-htmlmin'); // var livereload = require('gulp-livereload'); // var connect = require('gulp-connect'); var open = require('open'); //注册合并压缩js的任务 gulp.task('js', function () { //你的任务执行 具体过程 return gulp.src('src/js/*.js') // 找目标原文件 将原文件的数据读取到gulp的内存中 .pipe($.concat('build.js'))//合并js文件 .pipe(gulp.dest('dist/js/'))//临时输出 .pipe($.uglify())//压缩js文件 .pipe($.rename({suffix:'.min'}))//重命名 .pipe(gulp.dest('dist/js/'))//输出 //.pipe(livereload())//实时加载 .pipe($.connect.reload()) }); //注册编译less的任务 gulp.task('less', function () { return gulp.src('src/less/*.less') .pipe($.less())//将less文件转换为css文件 .pipe(gulp.dest('src/css/')) //.pipe(livereload())//实时加载 .pipe($.connect.reload()) }); //注册合并压缩css的任务 gulp.task('css',['less'] ,function () { return gulp.src('src/css/*.css') .pipe($.concat('build.css')) .pipe(gulp.dest('dist/css/')) .pipe($.rename({suffix:'.min'})) .pipe($.cleanCss({compatibility: 'ie8'})) .pipe(gulp.dest('dist/css/')) //.pipe(livereload())//实时加载 .pipe($.connect.reload()) }); //注册压缩html的任务 gulp.task('html', function () { return gulp.src('index.html') .pipe($.htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist/')) //.pipe(livereload())//实时加载 .pipe($.connect.reload()) }); //注册监视的任务--->半自动 gulp.task('watch',['default'], function () { //开启监视 livereload.listen(); //确认监视的目标并且绑定相应的任务 gulp.watch('src/js/*.js', ['js']); gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']); }); //注册一个全自动的任务 gulp.task('dev',['default'], function () { //配置服务器选项 $.connect.server({ root : 'dist/',//监视的源目标文件路径 livereload : true,//是否实时刷新 port : 5000//开启端口号 }); open('http://localhost:5000/'); //确认监视的目标并且绑定相应的任务 gulp.watch('src/js/*.js', ['js']); gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']); }) //注册一个默认任务 gulp.task('default', ['js', 'less', 'css','html']);