现代的网络中任何工具都有其使用“寿命”，当它的功能运速不能够满足程序员的要求时势必会有一种新型工具诞生来取代它。那今天笔者小丹也大家分享的这种新型工具就是Glup。

    Glup是一个构建自动化工具。Gulp的code-over-configuration以一种更有效的方法不只让撰写任务更加容易，也更好阅读及维护。而不管是多个应用程序提供工具对于我们的个人项目，Glup可以为我们提供一个自动构建过程。如果我们要使用Git就必须发出以下命令:git clone https://github.com/drewminns/sixrevisions_gulpstarter.git。那如何来使用Glup呢？

    Glup的安装。

    Glup利用JavaScript应用程序平台称为节点，js为我们提供了一个环境中运行应用程序。节点的特性之一—除了一个强大的工具来开发应用程序，包管理器，节点的缺省包管理器被称为npm。为了使用npm和Glup，需要安装节点。而一旦你安装了节点，就需从命令行可以使用npm安装Glup和任何其他包你需要。

    在你的CLI发出以下命令：npm install gulp -g

    如果你有困难：使用超级用户特权。如果上面的命令不工作，前缀的命令sudo。这个命令意味着超级做，使管理员(超级用户)访问文件系统。只要你有一个问题执行命令，添加sudo开始的命令：sudo npm install gulp -g 输入上面的命令，你可以要求你的密码。原因是我们正试图安装全球Glup包在我们的系统，如果你开始输入你的密码，你不会看到任何字符输入。

    在前进之前，让我们打破每个部分的命令意味着什么。

    npm是命令npm的范围内工作。

    install是执行的行动的范围内npm。

    gulp是我们想要安装的包的名称。

    -g是一个命令选项/标记代表了全命令。使用这个命令选项，我们看整个系统。

    改变到项目目录

    如果一切成功安装，没有错误，继续改变你的工作目录的目录下载示例文件。cd /your/project/directory 这将是我们的项目目录本教程。

    对一个项目使用Glup

    一旦我们有Glup安装在我们的系统，我们可以进入自动化项目。

    创建一个包。json文件运行以下命令：npm init 当您输入命令时，将看到创建一个名为package.json的文件的能力。尽你所能填写字段，最后你会发现一个新创建的包。json在项目文件目录。

    package.json是什么？

    package.json文件包含关于您的项目的信息。作为我们的项目我们添加更多的包，这些包的文件也将作为一个清单，告诉我们需要哪些文件系统。如果我们将我们的项目转移到另一台计算机或使用另一个开发人员想要使用相同的构建任务package.json文件将作为一个清单。

    创建一个gulpfile

    使用的引擎gulpfileGlup.js文件。这个JavaScript文件通常引用作为聽gulpfile。gulpfile条款。js和gulpfile在本教程的上下文是同义的。一个gulpfile允许我们在我们的项目中创建任务和自动化。gulpfile的内容，js将因项目而异。

    让我们为我们的项目创建一个gulpfile，touch gulpfile.js。

    安装Glup插件

    即使我们安装Glup在我们的系统，我们也需要将其安装在我们的项目目录。运行以下命令：npm install gulp --save-dev接下来，让我们安装一些Glup插件，允许我们编译Sass CSS文件，然后结合都成一个CSS文件。在命令行中，键入以下:npm install gulp-sass gulp-concat --save-dev

    node_modules目录

    你会发现一个node_modules目录创建发布后在你的项目目录npm install命令。这个目录包含所有必需的文件运行插件。当我们安装Glup插件和节点包，他们将被放置在node_modules。

    设置一个Glup的任务

    gulpfile之内。js，我们现在可以设置一饮而尽的任务。gulpfile开放，js在您最喜欢的代码编辑器和让我们的编码。

    指定项目的依赖关系，节点的require()函数允许我们指定所需的插件来运行我们的Glup的任务。这些被称为依赖项。我们依靠他们Glup的任务工作。我们不是调用 require()函数每次我们想参考我们的插件，我们不管require()函数返回到JavaScript对象。

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat');

    所以现在，当我们使用 sass()功能在我们的代码中，我们讨论的gulp-sass插件。当我们使用concat()。我们引用gulp-concat插件。

    使用项目的依赖关系，一旦我们告诉喝我们的依赖关系是什么，我们可以设置一个任务。我们将创建一个Glup任务命名styles.

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true    }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('styles/'))  });

    在上面的代码块中，我们已经创建了一个任务styles。这是我们的参考我们的任务。我们可以用这个名字在其他Glup的任务或者从命令行调用它。包装内的任务，我们写什么本质上是剧本的任务。Glup任务包装的一般格式是：

    gulp.task('name-of-the-task', function() {  // The guts go here });

    return声明说，styles任务将返回一个值的时候执行。在这种情况下是我们的加工代码的价值。我们使用一个Glup方法调用 .src()得到我们想要的并指定输入文件运行styles任务scss文件。将星号(*)在一个特定文件名的地方，我们本质上是说，去找任何文件的扩展。scss内部样式目录。

    gulp.task('styles', function() {  return gulp.src('styles/*.scss')  });

    现在是Glup的一部分，链接我们想和节点的执行的过程pipe()方法。pipe()方法允许我们通过代码从一个过程到另一个地方。当一个插件处理我们。scss文件输出传递到下一个插件。

    gulp.task('styles', function() {
        return gulp.src('styles/*.scss')
            .pipe(sass({
                'sourcemap=none': true }))
            .pipe(concat('style.css'))
            .pipe(gulp.dest('styles/'));  });

    这就是我们的styles任务：得到我们想要的和指定文件的过程。为此，我们使用.src()方法来获取和指向。scss样式目录内的文件。编译Sass CSS文件。请记住，我们实例化 sass()函数它指的是gulp-sass插件。所有CSS样式规则组合到一个样式表。gulp-concat插件创建一个样式表聽命名风格。css聽包含我们所有的css。风格的样式表目录css文件将被放置在样式目录。这是完成了 .dest()方法。

    运行一个任务

    现在关键时刻，运行的任务。运行的任务，首先要确保你的工作目录就是你gulpfile下面的命令将不会工作。我们的任务，您可能还记得，就是以他命名的styles。运行styles任务问题这个命令：gulp styles 我们的styles任务将运行，它应该编译。scss文件到一个文件中叫做风格。css将放置在样式目录。

    一个小问题，这有点艰苦之间来回切换代码和命令行编译Sass每次我们更新我们的代码。看你的源文件的变化Glup有一个内置的方法调用 .watch()，让我们告诉Glup寻找我们的源文件的任何更改。这样，每当我们更新我们的任何。scss文件我们styles任务将自动执行和重新编译的样式css文件。让我们创建另一个Glup任务看源文件。我们将名字这一饮而尽的任务watch。就像我们的tyles任务，我们将创建 watch任务使用包装。

    gulp.task('watch', function() {    // The guts goes here });

    这就是watch任务会做：使用Glup的 .watch()监视任何改变我们的方法。scss文件。每当Glup检测到一个变化我们styles任务将被执行。

    gulp.task('watch', function() {    gulp.watch('styles/*.scss', ['styles']); });

    现在不是运行gulp styles每当我们想要编译Sass，我们可以运行gulp watch只有一次当我们从事一个项目。Glup会看我们的Sass文件进行任何改变。当我们看到有更新Sass文件，它会自动运行styles的任务。这将会发生在我们保存scss文件。

    创建新任务

    Glup有一个庞大的社区，现在有超过1400的插件。我们可以改善我们与这些插件的构建过程。让我们创建另一个Glup任务。这个新任务将分析我们的JavaScript文件找到常见问题。对于这一大口的任务，我们将依靠JSHint。JSHint是一个JavaScript代码质量分析工具。JSHint会在聽一字不漏地仔细阅读我们的JavaScript聽文件如果这地方有问题，它将在我们的命令行打印问题。

    使用JSHint ，我们可以安装,需要个Glup插件gulp-jshint。首先，让我们安装gulp-jshint插件项目。npm install gulp-jshint --save-dev 接下来，让我们修改我们的依赖关系声明聽gulpfile：

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint');

    所以现在我们有 sass()，concat()和 jshint()在这一点上。让我们来建立一个任务jshint。这个Glup任务将运行gulp-jshint。js文件在js目录。

    gulp.task('jshint', function() {
        return gulp.src('js/*.js')
            .pipe(jshint())  });
    我们的任务不需要任何文件输出。相反，如果JSHint捕获任何错误我们将通过我们的命令行通知。运行的任务我们可以发出以下命令：gulp jshint 我们也可以添加jshint我们的任务watch任务所以我们不必手动称之为每当我们更改JavaScript文件。

    gulp.task('watch', function() {
      gulp.watch('styles/*.scss', ['styles']);
      gulp.watch('js/*.js', ['jshint']);  });

    添加流程现有的任务

    我们可以很容易地添加更多的事情要做我们现有的任务。现在让我们来做。让我们安装一个附加插件，它将给我们一个更加可读的输出。运行以下命令安装JSHint-stylish图书馆对我们的项目。npm install jshint-stylish --save-dev

    我们可以修改jshint任务，以便它使用jshint-stylish作为我们的记者。

    gulp.task('jshint', function() {
        return gulp.src('js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('jshint-stylish'))   });

    让我们运行jshint任务：gulp jshint 如果JSHint发现错误和代码质量问题，它将在我们的命令行输出。

    $ gulp jshint
     [10:29:57] Starting 'jshint'...
    \js\main.js
      line 2  col 7  Use '===' to compare with '0'.
        1 warning
     [10:29:57] Finished 'jshint' after 93 ms

    Auto-prefix CSS属性

    Vendor-prefixing CSS属性很多工作，了解前缀是所有在它自己的一份工作。幸运的是有一个包Autoprefixer将为我们做所有的努力工作。安装gulp-autoprefixer插件到你的项目中使用下面的命令：npm install gulp-autoprefixer --save-dev  添加我们需要gulp-autoprefixer插件依赖项声明。

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint'),
        autoprefixer = require('gulp-autoprefixer');

    修改 styles任务管gulp-autoprefixer插件的过程。

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true  }))
        .pipe(concat('style.css'))
        .pipe(autoprefixer())
        .pipe(gulp.dest('styles/'));  });

    确保您的目标正确的浏览器，你可以通过在一个逗号分离浏览器支持的列表。

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true }))
        .pipe(concat('style.css'))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
        .pipe(gulp.dest('styles/'));  });

    上面将支持所有浏览器的最后2版本，Safari 5。IE 8和9，Opera 12.1。完整列表的值可以通过在可以在这找到Browserslist.在这一点上，我们有三个Glup的任务都服务于一个目的构建过程：

    stylesCSS——处理过程相关

    jshint——检查我们的JavaScript文件

    watch——自动运行 styles和 watch每当Glup检测任务的变化我们的源文件。

    不过，我们可以做一个主任务，完成了所有这些。现在我们可以运行gulp watch并将开始watch任务，进而等待我们改变我们的文件。然而，如果我们想要的文件被编译并立即检查，然后看着改变所有通过简单地打字gulp。在gulpfile.js添加一个新的任务 default,而是使用一个函数的第二个参数，使用一个数组。gulp.task('default', []); 在这个数组，我们可以通过任务订单我们希望他们来看。gulp.task('default', ['styles', 'jshint', 'watch']);现在当我们运行gulp在命令行我们的项目目录它将：

    1、编译我们的Sass CSS

    2、所有的CSS合并成一个文件叫做styles.css

    3、添加前缀到适当的CSS属性

    4、检查我们的.js文件错误

    5、看源文件的变化并自动重新运行任务

    想象有手动完成所有的任务，每一次你更新你的源代码。这不仅是构建过程乏味的没有任务杀手，但也容易出现人为错误。

    (转载请注明转自：www.wangzhan.net.cn/news/n1669.htm，谢谢!珍惜别人的劳动成果，就是在尊重自己!）