As web developers, we sometimes find ourselves repeating the same tedious tasks again and again. If you consider how much time is wasted by running a build command or hitting refresh on your browser, 你会意识到你可以节省很多时间. Additionally, by automating your processes, you can stay focused on the task at hand instead of temporarily leaving “the zone” (your state of productivity).

In this JavaScript automation tutorial, you will learn how to automate your design 以及使用Gulp的开发过程. If you are more design-oriented，我鼓励你克服任何恐惧，继续往下读. On the other hand, if you are a developer you will be able to sweep right through this once you understand the logic behind it.

Gulp 是一个使用Node的构建系统.js’s streams to implement an asynchronous source-destination approach to automation. 一切都是用JavaScript编写的, so it is easy for anyone with intermediate coding knowledge to get started. Gulp构建过程由一组观察者和任务组成. 此外，Gulp背后的社区维护了一个 huge plugin directory within npm which helps accomplish any task from concatenating JavaScript to creating icon fonts from SVGs.

Alternatives to Gulp

还有很多其他选择, most of which have spawned in the past couple of years - the most notable one being Grunt. Gulp和Grunt之间的竞争永远不会有明确的赢家, 因为他们都有各自的优点和缺点, 因此我将避免深入探讨这个问题. In a nutshell, Grunt’s heavy reliance on config is what steers people towards Gulp’s JavaScript approach. 同时，本机GUI实现，如 Koala have gained some ground, mostly from people that withhold getting into coding. However, with the bundled applications it’s impossible to reach the level of customizability and extendability that Gulp offers.

过程自动化基础

Plugins

插件是gulp完成每个过程的手段. 插件通过npm安装，并使用" require "启动。.

Tasks

对于Gulp，任务总是有一个源和一个目标. In between them lie the pipes that call each plugin and output the transmuted results to the next pipe.

Globs

Globs是引用文件的通配符模式. Globs或Globs数组用作任务源中的输入.

Watchers

The watchers watch the source files for changes and call tasks whenever a change is detected.

gulpfile.js

这就是“gulp”命令所指向的JavaScript文件. It contains everything from the tasks to the watchers or other pieces of code used by tasks.

A Straightforward Task

To get started, you need Node.js 以及具有管理员访问权限的命令行shell. You can download Node.js from here. Once installed, you can run the following command to ensure that npm is up to date.

sudo npm install npm -g

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

Now you are ready to install Gulp and start calling some simple tasks. 使用以下命令全局安装Gulp.

sudo npm install gulp -g

注意，您也可以使用相同的命令进行更新.

You can download the starter kit that will help you with your first task from toptal-gulp-tutorial/step1. 它包含一个非常简单的任务，将SCSS文件编译为CSS. 它使用的是gulp-sass插件 libsass. I have chosen libsass here because it is way faster than the Ruby alternative, 尽管它缺少一些功能. 在项目的根目录中, you can use the following command to install all the plugins required.

npm install

This command reads the package.Json文件并安装所需的所有依赖项. 我们在这里使用“npm install”作为以下内容的简写:

npm install gulp --save-dev
安装gulp-sass——save-dev

" -save-dev "标志将选择的插件添加到包中.json devDependencies so that the next time you want to install everything, 你可以使用方便的" npm install ".

此时，您可以运行第一个任务. Run the following command and watch as all the SCSS files in the /scss folder are compiled into CSS in the corresponding directory:

gulp scss

注意，在本例中，我们指定要运行的任务. 如果省略任务名称，则将运行名为“default”的任务.

Code Walkthrough

以上只用7行JavaScript代码就完成了. 当然，一旦你掌握了它的简单性，你就会有宾至如归的感觉:

var gulp = require('gulp');
Var SCSS = require('gulp-sass');

在开始时，我们初始化所有将要使用的插件. Gulp是我们唯一离不开的东西:

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

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

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

为任务设置源文件. These are defined as globs. In this example we are referring to all the files in the “scss/” folder that end in “.scss”.

.pipe(scss())

At this point, we call the gulp-sass plugin which we previously defined:

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

Finally, we use “gulp.为我们的文件定义目标文件夹. 如果要连接的文件也可以是单个文件名.

进一步改进这个过程自动化实现, 你可以尝试包含一些其他的Gulp插件. For instance, you may want to minify the final product of your task using gulp-minify-css 并自动添加供应商前缀 gulp-autoprefixer.

Employing a Watcher

我已经创建了一个手表入门套件，你可以直接使用. You can download it from toptal-gulp-tutorial/step2. 它包括先前创建的SCSS任务的增强版本, 还有一个监视源文件并调用任务的监视程序. 要启动它，使用以下命令:

gulp

该命令启动启动监视程序的“default”任务. At this point you can edit any of the SCSS files and watch as the CSS files get recompiled. 您将能够在命令行中看到Gulp的通知.

Code Walkthrough

我们仅用3行额外的代码就为我们的任务设置了一个监视程序. That said, the watcher starter kit does not differ much from the introductory example. 在本节中，我们将详细介绍所有的添加和更改.

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

在这个例子中，Gulp源代码提供了一个globs数组. 第一个包含所有以".scss” also in subfolders, and the second one excludes the ones that start with “_”. This way we can use SCSS’s built-in function @import to concatenate the _page.scss file.

gulp.任务('default'， ['scss']，函数(){

这里我们定义了“默认”任务. “scss”任务在“default”之前作为依赖项运行。.

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

Finally, we call Gulp’s watch function to point at any file ending with “.每当发生更改事件时，运行“Scss”任务.

Now you are ready to create new watchers for other automated processes such as JavaScript concatenation, code hinting, CoffeeScript compilation, 或者其他可能想到的东西. To delve deeper into this JavaScript automation implementation, I propose adding gulp-notify 哪个会在任务运行时通知您. 另外，您可以创建一个单独的任务来 minify the resulting CSS code 并使“scss”任务作为该任务的依赖项运行. Finally, you can use gulp-rename to add the “.结果文件的最小”后缀.

JavaScript自动化的高级Gulp插件

在Gulp的插件库中有成千上万的插件, some of which go far beyond simple JavaScript automation of a build process. 以下是一些杰出的例子:

BrowserSync

BrowserSync injects CSS, JavaScript and automatically refreshes the browser whenever a change is made. Additionally, it contains a ghostMode feature which can be used to scare your colleagues or to greatly speed up your browser testing.

Browserify

Browserify analyzes the “require” calls in your application and converts it to a bundled JavaScript file. Also, there is a list of npm packages that can be converted into browser code.

Webpack

Similar to Browserify, Webpack 旨在将具有依赖关系的模块转换为静态文件. This one gives more freedom to the user as to how the module dependencies will be set, 也不打算效仿Node.js’s code style.

Karma

Gulp-karma 为Gulp带来了臭名昭著的测试环境. Karma follows the least configuration approach that Gulp also endorses.

Conclusion

In this process automation tutorial I have demonstrated the beauty and simplicity of using Gulp as a build tool. By following the steps described in the tutorial you will now be ready to fully automate your software development process both in your future and your legacy projects. Investing some time into setting up a build system for your older projects will certainly save you precious time in the future.

敬请关注即将推出的更高级的Gulp教程.