阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    目录