關於 Gulp.js
Gulp.js是一个可以极大地帮助前端开发体验的任务运行器。任务运行器的目的是自动化您在项目过程中必须重复重复的无聊任务。
Gulp.js 使用代码过于配置来设置其任务,这使得它非常容易维护项目。此外,它使用 Node.js 流,这使得它非常快。Gulp 和 Grunt 之间的关键区别在于,而不是为每个插件设置输入/输出,Gulp 通过所有设置的插件输出源文件,然后生成目标文件。
對於建立 Grunt.js 的偉大文章, 本教程是一個偉大的閱讀。
在本教程中,然而,我们将安装Gulp.js在我们的VPS上,并设置一个小项目来说明自动化任务是多么容易。 为此,我假定你已经安装了Node.js与NPM(Node Package Manager)一起。
安装
安装 Gulp.js 实际上很简单,因为我们正在使用 NPM,您只需要执行以下命令:
1npm install gulp -g
这将将Gulp.js gloablly在您的VPS上安装,并在命令行中为您提供。
我们的项目
为了说明Gulp的力量,我们将开始一个名为 Gus 的小前端项目,并专注于风格问题。
1mkdir Gus
2cd Gus
关于 Node 包管理器的一件好事是,你可以在一个 package.json 文件中声明你需要的项目库,然后你可以致力于你的版本控制的存储库。你可以手动创建这个文件或使用命令行实用程序来做到这一点。我们将使用第二种选项,因为它在不犯任何语法错误方面更安全。运行下面的命令并按照屏幕上的指示:
1npm init
我的新「package.json」檔案看起來像這樣,在遵循所有默認值並為我的項目設定一個描述後。
1{
2 "name": "Gus",
3 "version": "0.0.0",
4 "description": "My Gus project",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "author": "",
10 "license": "BSD-2-Clause"
11}
它可以包含比这更少,但也可能含有更多(正如我们将在一秒钟内看到的那样)。
现在我们有我们的package.json文件,我们可以将我们的Gulp.js库添加到项目中,并将它们自动包含在这个文件中作为 devDependencies。
对于本教程的目的,我们将坚持以下任务:编译 sass 文件,用供应商前缀自动预先定义结果的 css 文件,然后缩小它们。
为了让 Gulp 能够编译 Sass 文件,您需要先在 VPS 上安装 Ruby、Ruby Gems 和 Sass。
1sudo apt-get update
2sudo apt-get install ruby-full rubygems
3sudo gem install sass
接下来,运行以下命令在我们的项目中安装 Gulp,并将其保存为 devDependency :
1npm install gulp --save-dev
接下来,运行以下命令来安装执行我刚刚提到的任务所需的库:
1npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev
运行这些命令后,您会注意到几件事情:(1)项目根中有一个名为node_modules的新文件夹,其中包含所有安装的包,(2)后者在package.json文件中被称为 _devDependencies。
设定任务
所有任务和要求都需要设置在一个名为gulpfile.js的文件中,位于项目的根部,所以创建它并粘贴到以下块中:
1var gulp = require('gulp'),
2 sass = require('gulp-ruby-sass'),
3 autoprefixer = require('gulp-autoprefixer'),
4 minifycss = require('gulp-minify-css'),
5 rename = require('gulp-rename');
正如你所看到的,我们创建了一些变量,我们需要上面提到的所有库,你会注意到另一个叫做重命名,这将帮助我们重命名文件。
虽然您可以创建多个任务,甚至让它们相互运行,但我们现在只会创建一个叫做样式:
1gulp.task('styles', function() {
2 return gulp.src('sass/*.scss')
3 .pipe(sass({ style: 'expanded' }))
4 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
5 .pipe(gulp.dest('css'))
6 .pipe(rename({suffix: '.min'}))
7 .pipe(minifycss())
8 .pipe(gulp.dest('css'));
9});
上面我们使用gulp.task来生成一个名为styles的新任务,它的回调是gulp.src,它会找到要执行的任务的源文件,在我们的情况下,位于项目根中的sass/文件夹中的.scss文件,这些文件反过来通过Gulp插件进行管道,并发送到由gulp.dest设置的目的地。
换句话说,这项任务将从该文件夹中提取所有 .scss 文件,并将其编译成 css,然后通过自动预先进行运行。 结果的文件将放置在 css/ 文件夹中。
要测试这一点,创建两个文件夹(sass 和 css)并在名为styles.scss的sass/文件夹中创建一个.scss文件。
1$color: #eee;
盒子 { 颜色 : $ 颜色; 盒子大小: 边缘盒子; }
正如你所看到的,这是一些基本的SASS语法,其中包含一个尚未预先定义的CSS属性。让我们运行我们的Gulp.js风格任务,将其转化为我们需要的内容。
1gulp styles
你应该在终端窗口中看到这样的东西:
1[gulp] Using file /path/to/project/Gus/gulpfile.js
2[gulp] Working directory changed to /path/to/project/Gus
3[gulp] Running 'styles'...
4[gulp] Finished 'styles' in 224 ms
现在,如果你检查了css/文件夹,你会注意到2个文件:style.css和style.min.css。
1#box {
2 color: #eeeeee;
3 -webkit-box-sizing: border-box;
4 -moz-box-sizing: border-box;
5 box-sizing: border-box;
6}
很容易编译和预设,这样你就不用再担心了,而且微型版本也处于待机状态了,现在这已经很棒了,但让我们看看我们如何在我们的.scss 文件中进行更改,并在文件被保存时执行任务。
要做到这一点,我们需要在现有任务下面创建一个新的任务:
1gulp.task('watch', function() {
// 观看 sass 文件 gulp.watch('sass/*.scss', ['styles']); });本质上这将是一个任务,它监控特定文件中的文件的变化,并在发生这种情况时运行任务。
1gulp watch
这将继续监控相应的文件夹进行更改,并运行样式任务,直到我们停止它:
1ctrl + c
结论
在本教程中,我们已经看到如何在前端项目中设置Gulp.js,并使用它以高方便地运行自动化任务。它的功能并不止步,因为您可以在任务中使用的多种插件(http://gulpjs.com/plugins/)。