阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      gulp 用法详细总结

      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 日志
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录