摘要:是一款基于任务的设计模式的自动化工具,能给你的开发效率来一次飞跃。示例配置实现完整的自动编译并刷新网页官方网站使用文档插件列表
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. 安装 Gulpnpm install -g gulp npm install --save-dev gulp2. 安装插件
npm install gulp-compass --save-dev3. 创建配置文件 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...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87449.html
摘要:流式构建改变了底层的流程控制,大大提高了构建工作的效率和性能,给用户的直观感觉就是更快。我的看法关于流式构建,短短几句话无法讲清它的来龙去脉,但是在的世界里,确实是至关重要的。 Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么,究竟是什么使得 g...
摘要:简而言之,任何符合匹配规则的文件发生改变就会运行任务列表中的任务。第二种形式的参数是一个匹配规则,可选的选项对象,和一个可选的回调函数。当事件发生时会运行该回调函数。它获取任何或其子目录下的文件,因此,同样会应用于该任务。 参考 原文地址: https://scotch.io/tutorials/a... 源码Github地址:https://github.com/scotch-io...
摘要:核心概念流流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型,设置输出路径以某个路径的某个组成部分为基础向后拼接。 一、gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工...
摘要:核心概念流流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型,设置输出路径以某个路径的某个组成部分为基础向后拼接。 一、gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工...
阅读 1653·2019-08-30 13:04
阅读 2204·2019-08-30 12:59
阅读 1763·2019-08-29 18:34
阅读 1857·2019-08-29 17:31
阅读 1254·2019-08-29 15:42
阅读 3529·2019-08-29 15:37
阅读 2856·2019-08-29 13:45
阅读 2770·2019-08-26 13:57