工具 之 gulp使用

介绍

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

安装

mac用户全局安装时请加上sudo，附gulp官网

$ npm install -g gulp

开始

在项目根目录下创建一个名为 gulpfile.js 的文件
default任务为默认事项,cmd中输入gulp即可执行其中的代码
test任务为自定义事项,cmd中输入gulp test即可执行其中的代码

var gulp = require(\'gulp\');
gulp.task(\'default\', function() {
  // 将你的默认的任务代码放在这
});
gulp.task(\'test\', function() {
  // 将你的默认的任务代码放在这
});' +

src与dest

gulp.src与gulp.dest(如下执行gulp styles会将dev/scss目录最多向下三级的全部文件复制到css文件夹下并保持原有目录)
简单的说就是gulp.src是一个匹配的过程，gulp.dest是一个输出的过程

gulp.task(\'styles\', function() {
  return gulp.src(\'dev/scss/**/**/*\')
    .pipe(gulp.dest(\'css\'))
});

gulp.src还可以是多个匹配路径以数组的形式，如下

gulp.task(\'styles\', function() {
  return gulp.src([\'dev/scss/**/**/*\',\'dev/js/**/**/*\'])
    .pipe(gulp.dest(\'css\'))
});

gulp.src还可以匹配某一种格式的文件，如下

gulp.task(\'styles\', function() {
  return gulp.src(\'dev/scss/**/**/*.scss\')
    .pipe(gulp.dest(\'css\'))
});' +

gulp插件

1. gulp-less 编译Less
2. gulp-if 条件判断
3. gulp-sass 编译sass,scss文件
4. gulp-plumber 任务错误中断自动重传
5. gulp-autoprefixer css兼容自动添加
6. gulp-sourcemaps map
7. gulp-load-plugins gulp插件加载,后面调用例如：gulp-sass都以$.sass代替
8. gulp-imagemin 图片压缩
9. gulp-cache 图片缓存
10. gulp-uglify 压缩js
11. gulp-jshint js语法校验
12. gulp-minify-css CSS压缩 已经被标记为deprecated
13. gulp-minify-html html压缩
14. gulp-concat 文件合并
15. gulp-livereload 自动刷新
16. gulp-rename 重命名文件
17. del 删除文件
18. gulp-rev 生成版本号
19. gulp-rev-collector 结合gulp-rev使用更改html中引用的文件并添加版本号
20. gulp-babel 编译es6
21. gulp-rename 重命名文件
22. gulp-clean-css CSS压缩

gulp4

更新

1. 新的任务系统（基于 bach，替换掉了原先基于 orchestrator 的任务系统）
2. 移除 gulp.reset
3. gulp.task 不再支持三个参数的用法
4. gulp.task 用字符串注册的任务必须是直接在命令行中调用的任务
5. gulp.task 可以接受单参数语法，这个参数必须是一个命名函数，函数名会被作为任务名
6. 添加了 gulp.series 和 gulp.parallel 方法用于组合任务
7. 添加了 gulp.tree 方法用于获取任务树，传入 { deep: true } 参数可以得到一个 archy 兼容的节点列表
8. 添加了 gulp.registry 方法以定制注册表。
9. 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不过是以软链接的方式
10. gulp.dest 和 gulp.symlink 方法添加了 dirMode 参数允许对目标目录更好地控制
11. gulp.src 接收的文件匹配字符串会顺序解释，所以你可以写成这样 gulp.src(['.js', '!b.js', 'bad.js'])（排除所有以 b 开头的 JS 文件但是除了 bad.js）
12. gulp.src 方法添加了 since 选项，筛选在特定时间点之后修改过的文件（用于增量编译）
13. 将命令行分离出来成为一个独立模块，以便节约带宽/空间。用 npm install gulp -g 或 npm install gulp-cli -g 都可以安装命令行，只是 gulp-cli 不包含模块代码所以比较小
14. 命令行添加了 –tasks-json 参数，可以导出整个任务树以供他用
15. 命令行添加了 –verify 参数用以检查 package.json 中是否包含黑名单插件（违背准则而被禁入官方插件列表的可怜娃们）。

API

gulp4在gulp3的基础上新增了几个函数，但它的使用依旧简单方便。一共如下10个：

• gulp.src() –全局匹配一个或多个文件
• gulp.dest() –将文件写入目录
• gulp.symlink() –与dest相似，但是使用软连接形式
• gulp.task() –定义任务
• gulp.lastRun() –获得上次成功运行的时间戳
• gulp.parallel() –并行运行任务
• gulp.series() –运行任务序列
• gulp.watch() –当文件发生变化时做某些操作
• gulp.tree() –获得任务书树
• gulp.registry() –获得或注册任务

官方说明API说明:https://gulpjs.com/docs/en/api/concepts';
export default gulp;