使用Gulp.js改善您的ember.js工作流程

>与ember.js

一起使用Gulp.js的关键优点

>本文演示了Gulp.js如何通过自动化重复任务来显着增强您的ember.js开发工作流程。 其中包括SCSS汇编，JavaScript和CSS缩小和串联，文件监视，车把模板编译以及JavaScript代码优化。 我们将探讨Essential Gulp.js插件的设置和配置以实现这一目标。

本指南对Gulp.js的熟悉程度。 如果您需要刷新，请参阅Sitepoint对Gulp.js.

的简介

标准ember.js开发挑战>

ember.js项目通常涉及管理SCS，CSS，JavaScript和车把文件。 让我们检查常见的任务：

• > scss to CSS转换：将SCSS（SASSY CSS）变换为标准CSS。
降低：
• >通过在JavaScript和CSS中删除不必要的空格和评论来减少文件大小。> 串联：
>将多个文件组合到一个文件中，以最大程度地减少HTTP请求，改善了加载时间，尤其是在移动设备上。
• >>文件监视：每当修改文件时自动触发任务来自动化构建过程。
• >车把编译：将车把模板转换为javascript函数，以供ember.js Runtime使用。
• > JavaScript优化：最小化JavaScript代码大小，并通过诸如Minification和Renaming变量之类的技术提高性能。
• Essential Gulp.js插件

我们将利用以下插件：>

：核心Gulp.js软件包。

：对于SCSS编译（需要Ruby和Compass Gem）。

：用于JavaScript Minification和Optimization。
• gulp：用于更改上的文件监视和触发任务。
>
• gulp-compass：用于串联CSS和JavaScript文件。
>
• gulp-uglify：用于编译车把模板。
>
• gulp-watch
插件安装
• gulp-concat
• 创建一个gulp-ember-handlebars文件（如果不存在）。
>

全球安装Gulp：

> >本地安装插件：

>
1. package.json您的
现在应该在
2. >的下列出这些插件 npm install gulp -g
gulpfile.js configuration
3. npm install gulp gulp-compass gulp-uglify gulp-watch gulp-concat gulp-ember-handlebars --save-dev
创建一个

>文件，然后添加以下代码以导入插件：>

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');

定义Gulp Tasks

>让我们定义通用操作的任务。 请记住，该文件路径相对于gulpfile.js。

• > css任务：编译SCSS，连接和输出到。 dist/css

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

>模板任务：

编译车把模板，输出到
• >。>。 js/

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

>脚本任务：

uglifies，连接和输出javascript到
• >。。 dist/js

gulp.task('scripts', function() {
  // ... (Your JavaScript file list here) ...
  return gulp.src(scriptSrc)
    .pipe(uglify({ mangle: false }))
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('dist/js'));
});

观察任务：

监视文件和触发更改的相关任务。

>使用任务

gulp.task('watch', function() {
  gulp.watch('scss/*.scss', ['css']);
  gulp.watch('js/templates/**/*.hbs', ['templates']);
  gulp.watch('js/**/*.js', ['scripts']);
});

开发：

运行
• （或）开始手表任务并自动重建文件更改。 您可能需要调整开发设置以避免不必要的处理。> gulp gulp default uglify
生产：

在没有手表任务的情况下进行单个构建。

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

• 请记住，用您的实际项目的文件替换任务中的占位符JavaScript文件列表。 请咨询每个插件的文档，以获取高级自定义选项。 此设置为您的ember.js项目提供了强大而高效的工作流程。

以上是使用Gulp.js改善您的ember.js工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！