Gulp中文主页
一个重要前提：gulp在4.0以后做了结构上的调整，如果用3.x版本习惯的话，要回退到3.x版本，
npm install gulp@3 --save-de
[TOC]
Gulp rumen
Gulp入门
-
作用：
前端项目构建工具，基于nodejs的自动任务运行器，能自动完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务 - 特点：
- 任务化，
- 基于流（I/O）gulp将本地文件读入gulp内存，处理后在输出到本地文件
- 异步/同步：通过return来实现异步
- API
-
gulp.src(filePath/pathArr)
指向指定路径的所有文件，返回文件流对象
用于读取文件 -
gulp.dest(dirPath/pathArr)
指向指定的所有文件夹
用于向文件夹中输出文件 -
gulp.task(name, [deps], fn)
定义一个任务 -
gulp.watch()
监视文件的变化
- gulp插件
- gulp-concat：合并文件（js/css）
- gulp-ugify：压缩js文件
- gulp-rename：文件重命名
- gulp-less：编译less
- gulp-clean-css： 压缩css
- gulp-livereload：实时自动编译刷新
Gulp实战
- 创建目录：
└─src
│ gulpfile.js
│ index.html
│ package.json
│
├─css
├─js
└─less
- 创建gulpfile.js
npm install gulp --save-dev
npm install gulp-concat gulp-uglify gulp-rename --save-dev
var gulp = require("gulp");
//注册任务
gulp.task("任务名", function () {
//配置任务的操作
})
//注册默认任务
gulp.task('default',['任务名'])
- 合并js文件
js目录下创建test1.js, test2.js
test1.js
(function () {
function foo(num1, num2) {
return num1 + num2
}
console.log(foo(22, 56))
})()
test2.js
(function () {
var result = [1,2,3,4,5].map(function(item, index){
return item+10
})
console.log(result)
})()
gulpfile.js
引入gulp-concat, gulp-uglify, gulp-rename, 分别对应合并文件、压缩文件和重命名文件
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')
gulp.task('js', function () {
return gulp.src('src/js/*.js') //找到目标文件，将数据读取到gulp的内存中
.pipe(concat('build.js')) //临时合并文件为build.js
.pipe(gulp.dest('dist/js/')) //输出到本地
.pipe(uglify()) //压缩文件
.pipe(rename({suffix:'.min'})) //重命名文件，加min前缀
.pipe(gulp.dest('dist/js'))
})
注册默认任务
gulp.task('default',[])
压缩css和less
npm install gulp-less gulp-clean-css --save-dev
test1.css
#div1{
width: 100px;
height: 100px;
background-color: red;
}
test2.css
#div2{
width: 100px;
height: 100px;
background-color: bule;
}
test3.less
@base:yellow;
.index1{color: @base};
.index2{color: green;}
代码：
//注册转换less的任务
gulp.task('less', function () {
return gulp.src('src/less/*.less')
.pipe(less()) //编译less文件为css文件
.pipe(gulp.dest('src/css/'))
})
压缩css
//注册合并压缩css文件
gulp.task('css', function () {
return gulp.src('src/css/*.css')
.pipe(concat('build.css'))
.pipe(rename({suffix:'.min'}))
.pipe(cssClean({compatibility:'ie8'}))
.pipe(gulp.dest('dist/css/'))
})
压缩html
引入gulp-htmlmin
npm install gulp-htmlmin --save-dev
半自动构建
引入gulp-livereload
npm install gulp-livereload --save-dev
注册监听任务
//注册监视任务
gulp.task('watch', ['default'], function () {
//开启监听
livereLoad.listen()
//确认监听目标已经绑定相应的任务
gulp.watch('src/js/*.js', ['js'])
gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
全自动构建
引入插件
在需要监听的任务中加入
.pipe(livereLoad()) //实时刷新
命令行执行
$ gulp watch
[15:21:02] Using gulpfile C:\Workspace\Code\MyProject\Web\gulp_test\src\gulpfile.js
[15:21:02] Starting 'js'...
[15:21:02] Starting 'less'...
[15:21:02] Starting 'html'...
[15:21:02] Finished 'less' after 200 ms
[15:21:02] Starting 'css'...
[15:21:02] Finished 'html' after 205 ms
[15:21:02] Finished 'js' after 380 ms
[15:21:02] Finished 'css' after 216 ms
[15:21:02] Starting 'default'...
[15:21:02] Finished 'default' after 124 μs
[15:21:02] Starting 'watch'...
[15:21:02] Finished 'watch' after 102 ms
比如更改css文件，
[15:18:21] Starting 'css'...
[15:18:21] C:\Workspace\Code\MyProject\Web\gulp_test\src\dist\css\build.min.css reloaded.
自动加载对应css文件
全自动构建
引入插件, gulp-connect是创建一个小型服务器，open是用于自动在浏览器中打开地址
npm install gulp-connect --save-dev
npm install open --save-dev
全自动任务
//注册全自动监视任务
gulp.task('server',['default'], function () {
//配置服务器的选项
connect.server({
root:'dist/',
livereload:true,
port:5000
})
gulp.watch('src/js/*.js', ['js'])
gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
open('http://localhost:5000/')
在需要监听的任务中加入：
.pipe(connect.reload()) //实时刷新
然后执行
gulp server
