自动化构建工具 gulp

官网

相较于 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']);