如何在您的VPS上开始使用Gulp.js
关于 Gulp.js
Gulp.js 是一个任务运行器，可以极大地帮助您的前端开发体验。 任务运行器的目的是自动执行您在项目过程中必须一遍又一遍地完成的繁琐任务。 Grunt.js 是另一个如此受欢迎的任务运行程序，许多开发人员正在使用它来自动化前端流程。
Gulp.js 使用代码而不是配置来设置其任务，这使得项目的维护变得非常容易。 此外，它使用 Node.js 流，这使得它非常快。 Gulp 和 Grunt 之间的一个关键区别在于，Gulp 不是为每个插件设置输入/输出，而是通过所有设置的插件管道传输源文件，然后生成目标文件。
有关设置 Grunt.js 的精彩文章，this tutorial 是一个很好的阅读。
然而，在本教程中，我们将在我们的 VPS 上安装 Gulp.js 并设置一个小项目来说明自动化任务是多么容易。 为此，我假设您已经将 Node.js 与 NPM（节点包管理器）一起安装。 如果您还没有，可以开始使用 本教程 。
安装
安装 Gulp.js 实际上非常简单。 由于我们使用的是 NPM，因此您只需运行以下命令：
npm install gulp -g
这将在您的 VPS 上安装 Gulp.js 并使其在命令行中可供您使用。 因此，我们设置了我们的个人项目，并根据需要为其添加 Gulp 插件。
我们的项目
为了说明 Gulp 的强大功能，我们将启动一个名为 Gus 的小型前端项目，并专注于样式问题。 因此，让我们创建我们的项目文件夹并在里面导航：
mkdir Gus cd Gus
节点包管理器的一个好处是您可以在 package.json 文件中声明项目所需的库，然后您可以将其提交到版本控制的存储库。 您可以手动创建此文件或使用命令行实用程序来执行此操作。 我们将使用第二个选项，因为它在不犯任何语法错误方面更安全。 运行以下命令并按照屏幕上的说明进行操作：
npm init
在遵循所有默认设置并为我的项目设置描述后，我的新 package.json 文件看起来像这样。
{
"name": "Gus",
"version": "0.0.0",
"description": "My Gus project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
它可以包含比这更少的内容，但也可以包含更多内容（正如我们稍后将看到的那样）。
现在我们有了 package.json 文件，我们可以将 Gulp.js 库添加到项目中，并将它们作为 devDependencies 自动包含在此文件中。 但首先，我们要使用哪些库？
出于本教程的目的，我们将坚持以下任务：编译 sass 文件，使用供应商前缀自动为生成的 css 文件添加前缀，然后将它们缩小。
为了让 Gulp 能够编译 Sass 文件，您需要首先在 VPS 上安装 Ruby、Ruby Gems 和 Sass。 您可以使用以下命令快速处理该问题：
sudo apt-get update sudo apt-get install ruby-full rubygems sudo gem install sass
接下来，运行以下命令在我们的项目中安装 Gulp 并将其保存为 devDependency：
npm install gulp --save-dev
接下来，运行以下命令来安装执行我刚才提到的任务所需的库：
npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev
运行这些命令后，您会注意到几件事：(1) 在您的项目根目录中有一个名为“node_modules”的新文件夹，其中包含所有已安装的包；(2) 后者在 [X218X ] 文件为 devDependencies。
设置任务
他们的所有任务和要求都需要在项目根目录中名为 gulpfile.js 的文件中进行设置。 所以创建它并粘贴到以下块中：
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename');
如您所见，我们创建了一些变量，其中我们需要我上面提到的所有库。 您会注意到一个名为“重命名”的附加功能，它可以帮助我们重命名文件。
在此声明下方，我们现在可以创建我们的任务。 虽然您可以创建多个任务，甚至让它们相互运行，但我们现在只创建一个名为 styles 的任务：
gulp.task('styles', function() {
return gulp.src('sass/*.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'));
});
上面我们使用 gulp.task 来生成一个名为“styles”的新任务。 它的回调是“gulp.src”，用于定位将执行任务的源文件。 在我们的例子中，.scss 文件位于项目根目录的 sass/ 文件夹中。 这些文件依次通过 Gulp 插件传送并发送到由 gulp.dest 设置的目的地。
换句话说，此任务将从该文件夹中获取所有 .scss 文件并将它们编译为 css，然后通过自动前缀运行它们。 然后生成的文件将被放置在 css/ 文件夹中。 然后将相同的文件复制并在末尾使用 .min 后缀重命名，并通过缩小插件运行并放置在相同的 css/ 文件夹中。
要对此进行测试，请创建两个文件夹（sass 和 css）并在 sass/ 文件夹中创建一个名为“styles.scss”的 .scss 文件。 在里面，放置以下语句：
$color: #eee;
#box {
color : $color;
box-sizing: border-box;
}
如您所见，这是一些基本的 SASS 语法，其中包含尚未添加前缀的 CSS 属性。 让我们运行 Gulp.js styles 任务来把它变成我们需要的。 在项目根文件夹中，运行以下命令：
gulp styles
你应该在终端窗口中得到类似的东西：
[gulp] Using file /path/to/project/Gus/gulpfile.js [gulp] Working directory changed to /path/to/project/Gus [gulp] Running 'styles'... [gulp] Finished 'styles' in 224 ms
现在，如果您检查 css/ 文件夹，您会注意到 2 个文件：style.css 和 style.min.css。 第二个应该包含第一个的 minfyed 版本，其中应该包含以下 css 代码：
#box {
color: #eeeeee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
易于编译和前缀，因此您不必再担心了。 缩小版也处于待命状态。 现在这已经很棒了，但让我们看看我们如何让 Gulp 监视我们的 .scss 文件中的更改并在文件保存时运行任务。 这基本上可以为我们节省运行任务的命令行。
为此，我们需要在现有任务下创建一个新任务：
gulp.task('watch', function() {
// Watch the sass files
gulp.watch('sass/*.scss', ['styles']);
});
这本质上是一个监视指定文件夹中文件更改并在发生这种情况时运行任务的任务。 在我们的例子中，我们设置运行的任务是 styles。 现在我们需要从命令行运行 watch 任务：
gulp watch
这将继续观察相应文件夹的更改并运行 styles 任务，直到我们停止它：
ctrl + c
结论
在本教程中，我们了解了如何在前端项目中设置 Gulp.js 并使用它来非常方便地运行自动化任务。 它的力量并不止于此，因为您可以在任务中使用大量 插件 。 您可以操作 javascript 文件甚至图像，并设置运行其他任务的任务以实现更高的自动化。
