Web笔记 ·

使用Gulp进行JavaScript自动化简易说明书

前言

第一次接触gulp,当参考各方资料翻译下来,感觉还不如自己总结一份来的流畅,所以这篇最后将自己的实践放在开始,将之前的原文与译文放在最后以供参考。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

来源:gulp详细入门教程

使用Gulp进行JavaScript自动化简易说明书

(图片来源于网络)

直面主题

简单来说可分为如下步骤:

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

可以从toptal-gulp-tutorial/step1下载gulp基础实例, toptal-gulp-tutorial/step2下载含watcher的gulp基础实例。

安装nodejs

没有的node的话,从这下载 Node.js,若已经有了可跳过这一步。

最好能保证你的node与npm/cnpm处于最新的状态,以免安装某些最新版本的gulp插件时因此报错。

注:本文中的所有npm均可换为cnpm

全局安装gulp

npm install gulp -g

命令提示符执行gulp -v,出现版本号即为正确安装,该方法可用于检测是否安装成功。

项目安装gulp以及gulp插件

1.配置package.json文件

下面是一个简单的配置,仅配置了dependencies字段,用于本文章中的示例,本身不属于标准的package.json文件。dependencies字段指定了项目运行所依赖的模块。它们都指向一个对象。该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。

{
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-sass": "^1.3.3"
  }
}

每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

详情:package.json文件

2.项目安装gulp以及gulp插件

进入到package.json所在的项目的根目录,在没有其他说明情况下,以下实例基于toptal-gulp-tutorial/step1。使用如下命令安装临时gulp与插件

npm install

这个命令可以说是下面这两行命令的缩写:

npm install gulp --save-dev
npm install gulp-sass --save-dev

npm install会自动检索所在目录下package.json中在dependencies配置的依赖模块并下载安装。

配置gulpfile.js

说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。

基本格式如下:

/**
 * Plugins
 * -------
 */
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); // Gulp is always required  Gulp是永远都需要的   
var scss = require('gulp-sass'); // Gulp libsass implementation  gulp-sass属于本实例中需要的gulp插件


/**
 * Tasks
 * -----
 */

/**
 * Compiles SCSS files into CSS
 *
 * @source .scss files
 * @dest .css files
 */
//定义一个名为scss的任务(自定义任务名称)
gulp.task('scss', function() {
    return gulp.src('scss/*.scss')   //该任务针对的文件,此处为scss文件夹下,所有.scss后缀的文件
        .pipe(scss())               //该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); 
        .pipe(gulp.dest('css'));   //将会在css文件夹下,生成对应的.css文件
});

 

相关api

1.gulp.task(name[, deps], fn)

name

任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。

deps

类型: Array

一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

fn

该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())

2.gulp.src(globs[, options])

执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)

3.gulp.dest(path[, options])

处理完后文件生成路径

运行任务

通过

gulp scss

即可运行上面定义的任务。

若直接执行

gulp

gulp将会自动执行名为default的任务。

总结

以上便是最简单的gulp的应用。关于Watcher应用,暂时没时间写了,可以考虑看下面英文原文或译文的,东西不多,基本看看也就懂了。

简译

简译文章内容

第一次接触gulp,翻译不合适或不正确的地方欢迎随时指正。有能力者,也可看英文原文。

原文:An Introduction to JavaScript Automation with Gulp

文章内容

作为一个开发者,我们有时会发现我们一再着重复相同的炒鸡乏味的工作。如果你考虑一下多少时间被浪费在运行构建命令( a build command)或者刷新浏览器上,你将意识到可以节省大量的时间。此外,通过自动化你的流程,你可以专注于手头的工作,而不是暂时离开“ the zone”状态(你 达到最高效率的那种神奇的境界)。

在这个JavaScript自动化教程中,你将会学到如何使用 Gulp自动化你的设计和开发流程。如果你更加面向设计,我鼓励你克服你的任何恐惧读下去。另一方面,如果你是开发人员,你一旦了解其背后的逻辑,就可以轻易地完成它。

Gulp是一个构建工具, 利用 Node.js 流实现自动化异步源( source-destination )。 一切都是用JavaScript编写的,所以具有中间编码知识( intermediate coding knowledge)的人很容易上手。 Gulp构建过程由watchers和 tasks的集合组成。此外,Gulp官方社区在 npm 有一个 huge plugin directory , 可以帮助完成从JavaScript连接到通过svg创建图标字体( icon fonts )等。

Gulp的代替品

gulp有很多的代替品,其中大多数在几年前就已经存在了,最著名的就是Grunt。Gulp和Grunt之间的比赛永远不会有一个明确的赢家,因为他们都有利弊,所以我会避免深入研究。简而言之,Grunt对配置的严重依赖是导致人们走向gulp使用JavaScript的实现方式的主要原因。与此同时,诸如Koala等本地GUI实现取得了一些进展,主要来自于拒绝编码的人。然而,对于捆绑的应用程序,无法达到Gulp提供的可定制性和可扩展性。

过程自动化基础知识(Process Automation Fundamentals)

Plugins 插件

Plugins(插件)是完成每个过程(process)的手段。插件通过npm安装,并使用“require”启动。

Tasks  任务

对于Gulp,任务总是有源头(source)和目标(destination)。在它们之间放置调用每个插件的管道(pipes ),并将转换的结果输出到下一个管道。

Globs

Globs是引用文件的通配符模式。globs(glob 字符串)或glob的数组用作任务源中的输入。

Watchers

当检测到更改时,Watchers观察源文件以进行更改和调用任务。

gulpfile.js

gulp项目的配置文件。它包含从任务(tasks)到Watchers或任务使用的其他代码片段的所有内容。

一个简单的任务 (A Straightforward Task)

开始之前,你需要 Node.js和具有可运行管理员访问权限的命令行的shell。你可以从这下载 Node.js,安装好后,您可以运行以下命令,以确保npm是最新的。

sudo npm install npm -g

-g 标志 表示安装将是全局的。

现在你可以真正开始安装gulp并开始调用一些简单的任务。使用以下命令全局安装gulp。

sudo npm install gulp -g

请注意,你也可以使用相同的命令进行更新。

你可以从toptal-gulp-tutorial/step1下载入门工具包,帮助你完成第一个任务。它包含一个将SCSS文件编译为 cs的简单任务。它使用一个名为 gulp-sass插件,这个插件基于libsass。我在这里选择使用libsass, 因为它比Ruby的替代方法更快,尽管它缺少一些功能。一旦在项目的根目录中,你可以使用以下命令安装所需的所有插件。

npm install

此命令读取package.json文件并安装所需的所有依赖项。我们在这里使用“npm install”作为下面这些命令的缩写:

npm install gulp --save-dev
npm install gulp-sass --save-dev

“-save-dev”标志将选定的插件添加到package.json devDependencies中,以便下次安装所有内容时,可以直接使用方便的“npm install”。

此时您可以运行第一个任务。运行以下命令并观察,/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中:

gulp scss

请注意,在本示例中,我们指定了要运行的任务。如果我们省略了任务名称,则会运行名为“default”的任务。

代码演练

以上需要7行JavaScript代码完成。

var gulp = require('gulp');
var scss = require('gulp-sass');

一开始我们需要初始化我们将要使用的所有插件。

gulp.task('scss', function() {

我们定义名为“scss”的任务。

return gulp.src('scss/*.scss')

设置任务的源文件。这些被定义为全局。在这个例子中,我们指的是以“.scss”结尾的“scss /”文件夹中的所有文件。

.pipe(scss())

在这里,我们调用之前定义好的gulp-sass插件

.pipe(gulp.dest('css'));

最后,我们使用“gulp.dest”定义文件的目标文件夹。如果文件内容连接在一起,也可以是单个文件名。

为了进一步改进此过程自动化实现,您可以尝试添加一些其他Gulp插件。例如,您可能希望使用 gulp-minify-css 来最小化您的任务的最终产品,并使用gulp-autoprefixer自动添加供应商的前缀(vendor prefixes)。

使用Watcher

我创建了一个可以直接使用的watcher入门工具包。你可以从 toptal-gulp-tutorial/step2下载它,它包括之前创建的SCSS任务的增强版本,以及一个观察检测源文件并调用任务的watcher。为了启动它,请使用以下命令:

gulp

这个命令启动名为 “default”并开启watcher.的任务,此时,您可以编辑任何SCSS文件,并重新编译CSS文件。您将可以在命令行中看到Gulp的通知。

代码演练

我们已经为我们的任务设置了一个watcher,而且只有3个额外的代码行。也就是说这个watcher入门工具包与之前的引导例子没有特别大的差异。在本节中,我们将介绍所有的添加和更改。

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

在这个例子中,Gulp源提供了一个glob数组。第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件,第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。

gulp.task('default', ['scss'], function() {

这里我们定义名为“default” 的任务。“scss”任务在“default” 之前作为依赖运行。

gulp.watch('scss/**/*.scss', ['scss']);

最后,我们调用Gulp的watch函数指向以“.scss”结尾的任何文件,并且每当发生更改事件时,运行“scss”任务。

现在,你可以为其他自动化流程创建新的观察者,例如JavaScript连接,代码提示,CoffeeScript编译或其他可能出现的任何操作。要深入了解这个JavaScript自动化实现,我建议添加 gulp-notify ,当任务运行时通知你。此外,您可以创建一个单独的任务来最小化生成的CSS代码,并使“scss”任务作为依赖关系运行。最后,您可以使用gulp-rename将“.min”后缀添加到生成的文件中。

用于JavaScript自动化的高级Gulp插件

Gulp的插件库中存在数千个插件,其中一些远远超出了构建过程的简单JavaScript自动化。以下是几个杰出的例子:

BrowserSync

BrowserSync注入CSS,JavaScript,并在进行更改时自动刷新浏览器。此外,它还包含一个ghostMode功能,可用于吓唬您的同事或大大加快您的浏览器测试。

Browserify

Browserify分析应用程序中的“require”调用并将其转换为捆绑的JavaScript文件。另外,还有一个可以转换成浏览器代码的npm软件包列表。

Webpack

与Browserify类似,Webpack旨在将具有依赖关系的模块转换为静态文件。这一个就如何设置模块依赖关系给 了用户更多的自由,而不是追求Node.js的代码风格。

Karma

Gulp-karma 将臭名昭着的测试环境带到Gulp。Karma遵循Gulp也认可的最小配置方法。

结论

在这个过程自动化教程中,我演示了使用Gulp作为构建工具的优美和简单。通过遵循本教程中描述的步骤,您将可以在将来和您的旧项目中完全自动完成软件开发过程。投入一些时间为您的旧项目建立一个构建系统,一定会为您节省宝贵的时间。

请继续关注更高级的Gulp教程即将推出。

参考资料

入门指南-Gulp 中文网

An Introduction to JavaScript Automation with Gulp

gulp详细入门教程

package.json文件

 

参与评论