Gulp教程

Gulp 项目构建工具

gulp特点

• 任务化

• 基于流

  • gulp有自己的内存
  • 从本地读数据到内存（输入流）
  • 进行操作
  • 从内存输出到本地（输出流）

• 高效（异步多任务）

  固定的API

• gulp.src 读文件读到内存

• gulp.dest 从内存中输出到目录

• gulp.task 注册任务

• gulp.watch 监视任务变化

好用的plugins

• gulp-concat 用于合并文件（js/css等）
• gulp-uglify 压缩js
• gulp-clean-css 压缩css
• gulp-htmlmin 压缩html
• gulp-less 编译less
• gulp-rename 重命名（改成*.min.js/css）
• gulp-livereload 实时自动编译刷新
• gulp-connect 热加载
• gulp-load-plugins 包含基于gulp的所有插件

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/-dist

/-src

​	/-js

​	/-css

​	/-less

/-index.html

/-gulpfile.js

/-package.json

起步

• 全局安装gulp

  1 2	- 局部安装gulp ```npm i --save-dev gulp

• 配置gulpfile.js

  • 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    var gulp = require('gulp') var concat = requie('gulp-concat') var uglify = require('gulp-uglify') //注册任务 //gulp.task('任务名', function () { //配置任务操作 //}) //比如说：合并压缩js目录下的所有js文件 gulp.task('js', function () { return gulp.src('src/**/*.js') //**表示如果src还有文件夹，就会一层层的找出里面所有的js文件 .pipe(concat('build.js')) //找完之后合并到临时的文件里 .pipe(uglify()) //合并之后压缩 .pipe(rename({suffix: '.min'})) //重命名为build.min.js .pipe(gulp.dest('dist/js')) //完成之后从内存中扔出去，到dist/js中 }) //注册默认任务 //gulp.task('default', ['js']) //从gulp4.0开始就不能这么干了, 不然会报错 gulp.task('default', gulp.parallel('js'))

• 完事直接运行

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

  - 在index.html中引入dist.js下的js文件，测试 #### 看我如何处理css和less文件 ```javascript //先引入要用的插件 var gulp = require('gulp') var concat = require('gulp-concat') var cleanCss = require('gulp-clean-css') var less = require('gulp-less') //注册任务 //1、合并转换less gulp.task('less', function () { return gulp.src('src/**/*.less') .pipe(concat('less.css')) .pipe(less()) .pipe(gulp.dest('src/css')) }) //2、合并压缩css 注意：要等less转换成css gulp.task('css', ['less'], function () { return gulp.src('src/css/**/*.css') .pipe(concat('build.css')) .pipe(cleanCss({compatibility: 'ie8'})) //处理一下兼容 .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('dist/css')) })

同步和异步

• 上面的写法本身是异步的，所以css想要压缩必须等待less转换完成后才可以
• 如果去掉函数中的return，那么任务就变成同步的了

压缩html

1
2
3
4
5
6
7
8

var gulp = require('gulp')
var htmlMin = require('gulp-htmlmin')

gulp.task('html', funtion () {
	return gulp.src('index.html')
					.pipe(htmlMin({collapseWhitespace: true}))
					.pipe(gulp.dest('dist'))
})

自动编译

1
2
3
4
5
6
7
8
9

var gulp = require('gulp')
var livereload = require('gulp-livereload')

//注册监视任务
gulp.task('watch', ['default'], function () {
  livereload.listen() //开启监听
  gulp.watch('src/js/*.js', ['js'])
  gulp.watch(['src/css/*.js', 'src/less/*.less'], ['css'])
})

在每个任务最后最好铺设 .pipe(livereload())

热加载

1
2
3
4
5
6
7
8
9
10
11
12
13

var gulp = require('gulp')
var connect = require('gulp-connect')

gulp.task('server', ['default'], function () {
  //配置服务器选项
  connect.server({
    root: 'dist/',
    livereload: true, //实时刷新
    port: 5000
  })
  gulp.watch('src/js/*.js', ['js'])
  gulp.watch(['src/css/*.js', 'src/less/*.less'], ['css'])
})

在每个任务最后最好铺设 .pipe(connect.reload())

一个独立的插件 open 用来自动打开浏览器

令人舒服的插件gulp-load-plugins

1
2
3
4
5
6
7
8
9
10
11
12

var $ = require('gulp-load-plugins')() //执行之后会返回一个对象给$

//所有的 gulp-xxx 变成 $.xxx
$.concat()
$.cleanCss()
$.less()
$.htmlmin()
$.uglify()
$.rename()
$.livereload()
$.rename()
$.connect()