Gulp
简介
工程化工具
作用：
实现代码部署
css，JS，html代码压缩
ES6，less，styls代码编译
图片优化
...
原理：
基于unix中管道概念，stream流，前一个操作的输出作为后一个操作输入。
Gulp入口文件
gulpfile.js 每个项目中都需要有这个文件，当执行gulp会自动执行该文件。
task()
定义一个任务
gulp.task(name, [deps], fn);
参数1： name任务的名称
参数2： deps依赖的任务, 依赖的任务要先于当前任务执行.
参数3： fn任务的回调函数
// 开启任务gulp.task('zf', function () {});// 启动任务gulp.task('default', ['zf']);顺序执行任务，需要添加依赖.
src()
将文件转换成stream流
gulp.src(filePath, options);
参数1：filePath 文件路径，如果存在不同的文件，有两种方式表示
数组： ['a.js', 'b.css']
globs表达式： ['.js'] // 表示 a.js aa.js abc.js 注意不能够有目录符.
gulp.src('js/index.js')pipe()
处理每个阶段的流.
这些管道依次排开，前一个管道输出作为后一个管道的输入,从而控制流向.
Stream
复杂的加工过程分割成一系列独立的工序，这些工序可以反复被使用，在需要的时候还可以替换和重组.
dest()
将文件写入某个目录或者文件中
gulp.dest(path);
// 开启任务gulp.task('zf', function () { // 创建流 var stream = gulp.src('js/index.js'); // 写入位置 var pos = gulp.dest('test'); // 管理状态 stream.pipe(pos);});// 启动任务gulp.task('default', ['zf']);文件监听
watch()， 监听文件的变化.
文件变化的条件：写入，修改，删除，发生一个操作:保存文件。
用法1：
watch(globs, fn);
参数1： 文件的globs路径表示
参数2： 回调函数，回调函数中的参数： type->表示操作的类型 changed,deleted,added. path->操作的文件路径
gulp.watch('js/*.js', function ( ev ) { // 流 var stream = gulp.src('js/*.js'); // 写入位置 var pos = gulp.dest('test'); // 管理流 状态 stream.pipe(pos);});gulp.task('default');用法2：
gulp.watch(globs, deps);
参数1： 文件的路径
参数2： deps任务(task)集合
// 多个状态gulp.task('zf', function () { // 流 var stream = gulp.src('js/*.js'); // 写入位置 var pos = gulp.dest('test'); // 管理流 stream.pipe(pos);});gulp.task('default'); gulp.watch('js/*.js', ['zf']);globs
- 表示任意字符(除了目录符号,不能包括扩展名)
表示任意字符(可以包括目录符号，不能包括扩展名)
混合使用： /.js 包含所有js文件 。 lib/ /.js 表示lib文件下所有js文件
.js： 号匹配当前目录任意文件. .js匹配当前目录下所有的js文件
/.js : 匹配当前目录及其子目录下的所有js文件
!mian.js : ! 号移除匹配的文件，这里 移除 mian.js
.+(js|json): +号后面跟着圆括号，里面的元素用| 分割，匹配多个选项。这边将匹配js文件和json文件
{} ：匹配多个属性 例如：src/{a,b}.js 包含a.js和b.js文件 。 src/.{jpg,png,gif} src下所有的jpg/png/gif文件
插件
npm gulp 插件 gulp-插件
文件重命名
gulp-rename
rename(); 参数：重命名的文件新名字
npm install gulp-rename
var gulp = require('gulp');var rename = require('gulp-rename');gulp.task('renameJs', function () { var stream = gulp.src('js/*.js'); // 位置 var desc = gulp.dest('test'); // 修改名字 var name = rename('app.js'); stream.pipe(name); // 监听流 stream.pipe(desc);});gulp.task('default', ['renameJs']);JS压缩
gulp-unlify
npm install gulp-unlify
var gulp = require('gulp');var uglify = require('gulp-uglify');gulp.task('unlifyJs', function () { // 流 var stream = gulp.src('js/ /*.js'); // 位置 var pos = gulp.dest('test/js'); // 压缩 stream.pipe(uglify()) // 监听流 .pipe(pos); });gulp.task('default', ['unlifyJs']);CSS压缩
压缩CSS
gulp-minify-css 和 gulp-clean-css
npm install gulp-minify-css
var gulp = require('gulp');var minfiyCss = require('gulp-minify-css');// 开启任务gulp.task('lockCss', function () { // 流 var stream = gulp.src('css/*.css'); // 位置 var pos = gulp.dest('test/css'); // 压缩 stream.pipe(minfiyCss()) // 管理流 .pipe(pos);});gulp.task('default', ['lockCss']);HTML压缩
gulp-minify-html
gulp.task('lockHtml', function () { var stream = gulp.src('*.html'); var pos = gulp.dest('test'); stream.pipe(miniyHtml()) .pipe(pos);});gulp.task('default', ['lockHtml']);文件合并
gulp-concat
concat();
参数： 文件合并后的文件名
// 合并文件 gulp.task('concatFs', function () { // 流 var stream = gulp.src('js/ /*.js'); // 合并文件 stream.pipe(concat('main.js')) // 压缩文件 .pipe(uglify()) // 监听流 .pipe(gulp.dest('test/js'));});gulp.task('default', ['concatFs']);语法校验
js语法校验
gulp-jslint
var gulp = require('gulp');var jslint = require('gulp-jslint');// 校验js中的代码gulp.task('jslint', function () { var stream = gulp.src('js/index.js'); // 先校验 stream .pipe(jslint()) .pipe(gulp.dest('demo'))});// 启动任务gulp.task('default', ['jslint']);图片压缩
gulp-imagemin
压缩：gif，jpg，png 等常用类型图片格式
如果报错找不到需要依赖模块，手动npm拉去文件：
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng
var gulp = require('gulp');var imagemin = require('gulp-imagemin');// 创建任务gulp.task('dealImg', function () { gulp.src('img/*.*') // 压缩图片 .pipe(imagemin()) .pipe(gulp.dest('demo'))});// 启动任务gulp.task('default', ['dealImg']);增加前缀
gulp-autoprefixer
关键字：gulp, 前端工程化, var, task
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！