使用Gulp.js改善Ember.js工作流程-CSDN博客

我是Ember.js框架的拥护者。我在网络上看过很多Ember教程，但是大多数都没有解释如何设置构建系统来使用它。有鉴于此，我决定自己解释一下这部分问题。自从问世以来，Gulp.js已经成为JavaScript任务运行者讨论中的热门话题。提到JavaScript项目时，在讨论中弹出Gulp.js并非偶然。因此，本文将展示Gulp如何与Ember项目一起使用。

我将在本文中进行一些假设。我假设您已经对Gulp.js的工作原理有一个基本的了解，并且您之前已经建立了一个Gulp.js项目。如果没有，请访问SitePoint的Gulp.js 简介以进行复习。本文的其余部分将教您如何在Ember项目中创建和配置常见的Gulp.js任务。

典型的Ember.js工作流程

我从事过多个Ember.js项目，我注意到其中有一些共同的要求。这些要求涉及操纵SCSS，CSS，JavaScript和Handlebars代码的需求。以下是每个要求的要求和简要说明。

SCSS编译

这涉及将SCSS代码转换为CSS。

JavaScript和CSS缩小

缩小是通过删除不必要的空白来减小文件大小的过程。对于CSS，通常是在将SCSS代码转换为CSS之后完成的。

JavaScript和CSS串联

串联是将多个文件合并为一个文件的过程。通常这样做是为了减少对服务器的HTTP请求数量。更多的文件意味着更多的HTTP请求，这将导致更长的下载时间。串联后，您只需要一个HTTP请求。通过缓慢的网络连接（例如移动设备）提供文件时，此功能特别有用。

文件/文件夹观看

缩小，连接和编译等任务可以手动运行。但是，它们是重复性的任务，很快就会变得乏味而无聊。使用Gulp.js监视程序任务，您可以设置文件监视程序以监视所需文件的更改。当它检测到更改时，它将响应该更改运行一个或多个任务。

车把汇编

把手是Ember.js的默认模板语言。但是，浏览器无法解析Handlebars代码。因此，我们需要一种将把手代码转换为HTML的方法。那就是Handlebars编译开始起作用的地方。首先，Handlebars代码被转换为JavaScript函数。然后，在Ember运行时要求将适当的HTML附加到DOM时，该函数将运行。

JavaScript实用化

统一JavaScript是一个两步过程。第一步是通过缩小消除空白。第二步在可能的情况下将JavaScript函数名称和变量简化为单个字符。原因是较短的变量名需要较少的字节，从而加快了下载速度。

Gulp.js插件细分

本节将重点介绍我们需要的插件并描述其功能。

`gulp`

这是安装Gulp.js本身的基本插件。

`gulp-compass`

该插件将SCSS代码编译为CSS。要使用它，必须安装Ruby和指南针gem 。

`gulp-uglify`

该插件可用于JavaScript代码。您可以设置一个选项，以免遇到某些问题时不更改函数名称。

`gulp-watch`

这个插件使您可以让项目监视一个或多个文件的更改。

`gulp-concat`

此插件使您可以将多个CSS或JavaScript文件合并为一个。当然，这些文件必须是同一类型。

`gulp-ember-handlebars`

该插件可让您将车把转换为JavaScript。

安装插件

首先创建一个package.json文件，其中包含一个空的JavaScript对象{} 。接下来，我们将安装先前列出的插件。使用终端，导航到项目的根目录。通过在终端中使用以下命令，将上述插件安装并添加为依赖项。

npm install gulp -g

这将全局安装gulp。接下来，使用以下命令将插件保存到本地项目：

npm install gulp --save-dev

该命令的--save-dev部分将插件作为依赖项添加到package.json 。删除它只会安装插件，而不会将其添加到您的文件中。

对其他插件重复第二个命令。在每种情况下，请将gulp替换为您要安装的插件的名称。例如， gulp-compass ， gulp-concat等。完成后，查看package.json ，您应该看到类似以下内容：

{
  "devDependencies": {
    "gulp": "^3.8.0",
    "gulp-compass": "^1.1.9",
    "gulp-concat": "^2.2.0",
    "gulp-ember-handlebars": "^0.6.0",
    "gulp-uglify": "^0.3.0",
    "gulp-watch": "^0.6.5"
  }
}

要求插件

在与package.json相同的目录中创建一个gulpfile.js 。在其中添加以下代码，这些代码将导入插件。查看变量名应该很好地表明它们代表哪个插件。

var gulp = require('gulp'),
  compass = require('gulp-compass'),
  watch = require('gulp-watch'),
  handlebars = require('gulp-ember-handlebars'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat');

配置插件的任务

在本节中，我们将通过以各种组合使用插件来配置任务。在适用的情况下，我将说明一项任务是否正在使用多个插件。请注意，不同任务的所有文件路径都相对于gulpfile.js文件。

CSS任务

该任务完成了三件事。它利用了三个插件， compass ， concat和gulp 。它将SCSS文件编译为CSS，将它们连接起来，然后将结果输出到您选择的文件中。

gulp.task('css', function() {
  return gulp.src('scss/*.scss')
    .pipe(compass({ sass: 'scss' }))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('dist/css'));
});

模板任务

此任务使用handlebars ， concat和gulp插件完成两件事。它以Handlebars文件列表作为输入，将它们编译为JavaScript，然后将它们串联为一个文件。然后，它将输出文件存储到所需的位置。

gulp.task('templates', function() {
  gulp.src(['js/templates/**/*.hbs'])
    .pipe(handlebars({
      outputType: 'browser',
      namespace: 'Ember.TEMPLATES'
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('js/'));
});

脚本任务

该任务完成了两件事，并利用了三个插件gulp ， concat和uglify 。它以JavaScript文件列表作为输入。然后，它对内容进行丑陋处理，将它们全部合并为一个文件，然后将其存储在所需的位置。

gulp.task('scripts', function() {
  var scriptSrc = [
    'js/vendor/jquery-1.10.2.js',
    'js/vendor/jquery-ui.custom.min.js',
    'js/vendor/moment.min.js',
    'js/vendor/handlebars.runtime-v1.3.0.js',
    'js/vendor/ember-1.3.2.js',
    'js/vendor/ember-data.js',
    'js/vendor/local-storage-adapter.js',
    'js/helpers.js',
    'js/main.js',
    'js/templates.js',
    'js/components.js',
    'js/models/*.js',
    'js/controllers/*.js',
    'js/router.js',
    'js/views/*.js',
    'js/fixtures.js',
    'js/routes/*.js'
  ];

  return gulp.src(scriptSrc)
    .pipe(uglify({ mangle: false }))
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('dist/js'));
});

文件监视程序任务

这将创建一个监视任务，其中包含多个子任务。子任务每个监视几种文件类型。当任何受监视的文件发生更改时，将响应该更改触发适当的任务。

gulp.task('watch', function() {
  //watches SCSS files for changes
  gulp.watch('scss/*.scss', ['css']);

  //watches handlebars files for changes
  gulp.watch('js/templates/**/*.hbs', ['templates']);
  
  //watches JavaScript files for changes
  gulp.watch('js/**/*.js', ['scripts']);
});

如何使用任务

为了展示如何使用上述任务，我将向您展示开发Ember.js应用程序时使用它们的两种方式。

开发用途

在开发过程中，我需要能够编译SCSS，编译Handlebars，连接CSS，连接JavaScript并对其进行丑化。需要注意文件的更改。因此，我将以下任务设置为在命令行上运行。

gulp.task('default', ['css', 'templates', 'scripts', 'watch']);

在这里，我为Gulp.js设置了默认任务。它在终端中使用gulp命令运行。由于watch任务的依赖性，这将启动后台任务。每当文件更改时， watch任务内部的任务（ css ， templates和scripts ）都会运行。

生产用途

在生产期间，当我准备交付应用程序时，除了监视任务外，我需要默认任务的从属任务。这是因为我不会对文件进行任何更改，并且我需要构建工具仅运行一次。这可以使用gulp production命令运行，如下所示：

gulp.task('production', ['css', 'templates', 'scripts']);

结论

到此为止，我们的教程结束了如何在您的Ember.js项目中使用Gulp。我们定义了几个任务来完成常见任务的组合。但是请注意，您可以混合和匹配作业。例如，您可以在开发过程中关闭JavaScript代码的丑陋化，而仅在生产任务中将其打开。一种方法是定义两个单独的任务，一个任务用于开发，另一个任务用于生产。而且，这些任务仅特定于我的项目。我敦促您查看每个插件的文档页面。这些具有更深入的信息，可以进一步自定义它们以满足您的需求。一个很好的起点是Gulp.js 插件页面。

我希望这是有用的，并且像往常一样，如果您有任何疑问或对以上几点有所帮助，请与我们联系。

From: https://www.sitepoint.com/improving-ember-js-workflow-using-gulp-js/