gulp 用法详细总结

🌙
手机阅读
本文目录结构
axihe

gulp 是自动化执行工具;一些任务需要重复的执行,都可以用 gulp 来完成;

  • 把文件从开发目录拷贝到生产目录
  • 把多个 JS 或者 CSS 文件合并成一个文件
  • 对 JS 文件和 CSS 进行压缩
  • 把 sass 或者 less 文件编译成 CSS
  • 压缩图像文件
  • 创建一个可以实时刷新页面内容的本地服务器

gulp 用的是 node 中流的概念,上一级的输出是下一级的输入;流是一种有起点和终点的数据传输手段;

安装 gulp:基于 node 的,先要安装 node 环境;

npm init //初始化项目
npm install gulp –-save-dev //在node_modules下安装本地的gulp库;并且把配置写到package.json里

注意:var gulp = require(‘gulp’);

gulp 的任务必须放在 gulpfile.js 里,需要新建一个 gulpfile.js 的文件,文件名不可改变

var gulp = require(‘gulp’);
//通过require可以把gulp模块引入当前项目并赋值给gulp变量,这样gulp这个变量里面就会拥有gulp这个变量里的所有gulp的方法;

gulp 的工作方式;

gulp 的使用流程一般是:

1、首先通过gulp.src()方法获取到想要处理的文件流
2、把文件流通过pipe方法导入到gulp插件中,
3、最后把经过插件处理后的流再通过pipe()方法导入到gulp.dest()中

gulp 的 4 个核心 API:

gulp.src()
gulp.dest()
gulp.task()
gulp.watch()

演示代码:

gulp.task('test', function () {
gulp.src('client/templates/*.jade')
        .pipe(jade())
        .pipe(minify())
        .pipe(gulp.dest('build/minified_templates'));
});

1、gulp.src(): 获取数据流;

gulp 是图 stream 为媒介,不需要频繁的生成临时文件,所以速度会很快;需要注意的是 gulp.src() 这个流的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径,文件名和内容等信息;

需要熟知的参数标记,其他所有的参数标记只在一些任务需要的时候使用。

  • v 或 –version 会显示全局和项目本地所安装的 gulp 版本号
  • gulpfile 手动指定一个 gulpfile 的路径,这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
  • cwd dirpath 手动指定 CWD。定义 gulpfile 查找的位置,此外,所有的相应的依赖(require)会从这里开始计算相对路径
  • T 或 –tasks 会显示所指定 gulpfile 的 task 依赖树
  • tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表
  • color 强制 gulp 和 gulp 插件显示颜色,即便没有颜色支持
  • no-color 强制不显示颜色,即便检测到有颜色支持
  • silent 禁止所有的 gulp 日志

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang