我是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/