Gulp.js：比 Grunt 更简单的自动化的项目构建利器

Lsnsh 发布于2019-08-21 12:07 / 649人阅读

摘要：是一款基于任务的设计模式的自动化工具，能给你的开发效率来一次飞跃。示例配置实现完整的自动编译并刷新网页官方网站使用文档插件列表

Gulp 是一款基于任务的设计模式的自动化工具，能给你的开发效率来一次飞跃。

在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化，自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、部署文件生成，并监听文件在改动后重复指定的这些步骤。

得益于 Grunt 基于任务的设计模式，这些步骤可以很好的归类执行，让开发效率得到了一次提升，但杀敌 1000，得自损 800 啊，学习曲线有点高。

Grunt.js 太复杂了，复杂到比使用和配置 Vim 都困难。恰好看到有人推荐 Gulp，打开网站的瞬间就明白：短短 4 段文字就说清安装和使用方法，没错就选 Gulp 了。

Gulp 简明教程：

Gulp 是基于 node.js 的，所以你需要先安装 node.js http://nodejs.org/download/

1. 安装 Gulp

npm install -g gulp
npm install --save-dev gulp

2. 安装插件

npm install gulp-compass --save-dev

3. 创建配置文件 gulpfile.js

在项目的根目录创建配置文件 gulpfile.js，Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest

来看一个典型的 gulpfile.js 文件，该文件执行 Compass 任务，Compass 包含 SASS 大量定义好的 mixin，函数，以及对 SASS 的扩展：

// 引入 gulp
var gulp = require("gulp");

// 引入 Plugins
var compass = require("gulp-compass");

// 创建 Compass 任务
gulp.task("compass", function() {
  gulp.src("./scss/**")
    .pipe(compass({
        comments: false,
        css: "css",
        sass: "scss",
        image: "img"
    }));
});

// 默认任务
gulp.task("default", function() {
    gulp.run("compass");

    gulp.watch([
        "./scss/**",
        "./img/**"
        ], function(event) {
        gulp.run("compass");
    });
});

4. 运行 Gulp

在项目目录下执行 gulp 命令就会运行 default 任务：先运行一遍 compass 任务，然后监视 scss 和 img 目录的变动，如果有改动再执行 compass 任务。

执行 gulp compass 就能运行 compass 任务，非常方便，还有更多高级的配置和使用方法，可以看更详细的官方文档。

示例配置：Gulp 实现完整的 SASS 自动编译并刷新网页
官方网站：http://gulpjs.com/
使用文档：https://github.com/wearefract...
插件列表：http://gratimax.github.io/sea...

专线服务混合云简单的asp项目马斯克：特斯拉自动驾驶系统的目标是比人类比深度学习更强更改过域名的公司

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87449.html

“流式”前端构建工具——gulp.js 简介

摘要：流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是更快。我的看法关于流式构建，短短几句话无法讲清它的来龙去脉，但是在的世界里，确实是至关重要的。 Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 评论0 收藏0
前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
Gulp 入门指南

摘要：简而言之，任何符合匹配规则的文件发生改变就会运行任务列表中的任务。第二种形式的参数是一个匹配规则，可选的选项对象，和一个可选的回调函数。当事件发生时会运行该回调函数。它获取任何或其子目录下的文件，因此，同样会应用于该任务。参考原文地址： https://scotch.io/tutorials/a... 源码Github地址：https://github.com/scotch-io...

yanbingyun1990 2019-08-21 17:19 评论0 收藏0
gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

xuhong 2019-08-28 18:16 评论0 收藏0
gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

vibiu 2019-08-21 10:38 评论0 收藏0