如何获得与Gulp.js您的VPS启动

关于Gulp.js

Gulp.js是一个任务亚军，可以帮助您的前端开发深有体会。 任务运行器的目的是自动执行繁琐的任务，您必须在项目过程中重复执行这些任务。 Grunt.js是另一个这样的流行的任务运行器，许多开发人员正在使用它来自动化前端进程。

Gulp.js使用代码配置来设置其任务，这使得项目的维护非常容易。 此外，它使用Node.js流，使其非常快。 Gulp和Grunt之间的一个关键区别是，不是为每个插件设置输入/输出，Gulp管道通过所有设置插件源文件，然后产生目标文件。

有关设置Grunt.js一个伟大的文章， 本教程是一个伟大的阅读。

然而，在本教程中，我们将在我们的VPS上安装Gulp.js并设置一个小项目，以说明自动执行任务是多么容易。 为此，我假设您已经与NPM（节点程序包管理器）一起安装了Node.js。 如果你还没有，你可以开始使用本教程 。

安装

安装Gulp.js实际上很简单。 由于我们使用NPM，所以您需要做的是运行以下命令：

npm install gulp -g

这将安装Gulp.js阴影在您的VPS上，并使其可在命令行中。 因此，我们设置了我们单独的项目，我们根据需要添加Gulp插件。

我们的项目

为了说明咕嘟咕嘟的力量，我们将启动名为格斯小前端项目，并专注于造型的问题。 让我们创建我们的项目文件夹并在里面导航：

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文件，autoprefix生成带有供应商前缀的css文件，然后将其缩小。

为了能够编译Sass文件，Gulp需要首先在VPS上安装Ruby，Ruby Gems和Sass。 您可以使用以下命令快速处理：

sudo apt-get update
sudo apt-get install ruby-full rubygems
sudo gem install sass

接下来，运行以下命令在我们的工程安装杯和其保存为devDependency：

npm install gulp --save-dev

接下来，运行以下命令来安装执行刚刚提到的任务所需的库：

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev

几件事情在运行这些命令后，你会发现：（1）有在你的项目根的新文件夹名为“node_modules”包含所有已安装的软件包，（2），后者是在引用package.json文件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生成一个名为“款式”的新任务。 它的回调是“gulp.src”，它定位将在其上执行任务的源文件。 在我们的例子中.scss位于文件sass/项目根文件夹。 这些文件依次通过咕嘟咕嘟插件管道并送到他们的目的地由设置gulp.dest 。

换句话说，这个任务将采取一切.scss从该文件夹的文件，并通过autoprefixing运行之前它们编译到CSS。 然后将所得的文件将被放置在css/文件夹。 然后将相同的文件被复制，并在一端与一.minStapling更名并通过缩小文件插件运行，并放置在同一css/文件夹。

为了验证这一点，创建两个文件夹（SASS和CSS），并创建一个.scss在文件sass/称为“styles.scss”文件夹中。 在里面，放置以下语句：

$color: #eee;

#box {
  color : $color;
  box-sizing: border-box;
}

正如你所看到的，这是一些基本的SASS语法，其中包含一个没有前缀的CSS属性。 让我们来运行我们的Gulp.js styles的任务把它变成我们所需要的。 从项目根文件夹中，runt下面的命令：

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;
}

随意编译和前缀，所以你不必再担心了。 缩小的版本也处于待机状态。 现在，这已经是真棒，但让我们看看怎么能有咕嘟咕嘟看在我们的变化.scss文件和运行任务的文件被保存。 这将基本上保存我们甚至行程的命令行运行任务。

为此，我们需要在现有的任务下创建一个新任务：

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

  // Watch the sass files
  gulp.watch('sass/*.scss', ['styles']);

});

这本质上是一个任务，监视指定文件夹中文件的更改，并在发生这种情况时运行任务。 我们设置为在我们的例子中运行的任务是styles 。 现在我们需要从命令行运行watch任务：

gulp watch

这将继续关注更改相应的文件夹，然后运行styles的任务，直到我们停止它：

ctrl + c

结论

在本教程中，我们已经了解了如何在前端项目中设置Gulp.js，并使用它来以很高的方便性运行自动化任务。 因为有一个大量的权力并不到此为止插件可用，你可以在你的任务使用。 你可以操纵javascript文件，甚至图像和设置任务运行其他任务，更自动化。