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

在本教程中,我们将在我们的VPS安装Gulp.js并设置了一个小项目来说明它是多么容易实现自动化任务。为此,我假设你已经使用的Node.js NPM(节点包管理器)一起安装。

关于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.cssstyle.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文件,甚至图像和设置任务运行其他任务,更自动化。

文章提交者: 丹尼