工具 之 gulp使用

timg.jpeg

介绍

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;

阅读 194

推荐阅读
鱼叔子
用户专栏

鱼叔子的技术分享

0 人关注
15 篇文章
专栏主页