使用 grunt 在前端应用程序上构建 prod/dev 环境答案

【问题标题】：Using grunt for building prod/dev environment on frontend app使用 grunt 在前端应用程序上构建 prod/dev 环境
【发布时间】：2016-04-28 08:05:52
【问题描述】：

我的应用程序目前只是一个前端，我使用 grunt 执行以下操作：

将必要的 CSS 和 JS 从 bower_components 复制到正确的目录中
运行 jshint
构建文档

我想通过编译我的 Handlebars 模板、编译 requirejs 模块并缩小生成的 JS 和我所有的 CSS 来更深入地了解部署过程。

问题是我想保持一个开发环境，其中文件没有被缩小并且requirejs没有被编译。

我怎样才能做到这一点？具体来说，我是否应该对我的index.html 进行模板化，以便它对 prod 环境使用单个 CSS，对 dev 环境使用多个 CSS？

这里是我的来源的链接：https://github.com/lilorox/darts/tree/dev（开发分支是最新的）。

【问题讨论】：

标签： javascript css gruntjs requirejs handlebars.js

【解决方案1】：

我曾经尝试使用 grunt，但是当配置变大时，我发现自己对 grunt 的配置感到很困惑。我会尝试通过使用gulp 为您的前端构建工具提供建议。它更简单，更容易阅读和更快。您可以阅读差异here。

几乎相同，虽然 grunt 在 gruntfile.js 中指定了所有配置，但 gulp 在 gulpfile.js 中指定了它的配置。通常我会在我命名为gulpfile.config.js 的额外文件中创建自己的配置。它看起来像这样：

gulpfile.config.js

module.exports = {
    development: {
        css: [
            './development/bower_components/bootstrap/dist/css/bootstrap.min.css',
            './development/bower_components/font-awesome/css/font-awesome.min.css'
        ],
        js: [
            './development/bower_components/angular/angular.min.js',
            './development/app/components/*.js',
            './development/app/components/**/*.js'
        ],
        ENV: {
            name: 'development'
        }
    },
    production: {
        css: ['./production/dist/css/app.min.css'],
        js: ['./production/dist/js/app.min.js'],
        ENV: {
            name: 'production'
        }

    }
}

在 gulpfile.js 中，我可以简单地根据我在 gulpfile.config.js 中配置的环境运行任务

var config = require('./gulpfile.config.js'),
    gulp = require('gulp'),
    cleancss = require('gulp-clean-css');

gulp.task('scripts', function() {
  return gulp.src(config.development.js)
    .pipe(concat('app.js'))
    .pipe(ngannotate())
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(config.ENV.name + '/dist/js'))
});

就像 grunt 一样，gulp 提供了大量很酷的插件来构建您的前端应用程序。我自己通常使用 gulp-less、gulp-minify-css、gulp-ng-annotate、gulp-uglify、gulp-concat、gulp-server-livereload、gulp-rename、gulp-inject、gulp-imagemin。当然，您可以探索许多其他插件。希望这可以帮助！

[更新 - 基于环境构建 index.html]

首先你需要配置任务并且需要所有的 gulp 插件

var config = require('./gulpfile.config.js'),
    gulp = require('gulp'),
    del = require('del'),
    inject = require('gulp-inject'),
    rename = require('gulp-rename'),
    gulpif = require('gulp-if'),
    argv = require('yargs').argv;

if (argv.production) {
    var selectedConfig = config.production;
} else {
    var selectedConfig = config.development;
}

gulp.task('index', function() {
    return gulp.src('./development/assets/templates/index.tpl.html')
        .pipe(inject(gulp.src(selectedConfig.css.concat(selectedConfig.js), {read: false}), {ignorePath: selectedConfig.ENV.name}))
        .pipe(rename('index.html'))
        .pipe(gulp.dest(selectedConfig.ENV.name));
})

并提供index.tpl.html

<!DOCTYPE html>
<html>
    <head>
        <!-- inject:css -->
        <!-- endinject -->
    </head>
    <body>
        <!-- inject:js -->
        <!-- endinject -->
    </body>
</html>

然后您可以通过运行gulp index --development 或gulp index --production 来简单地构建index.html

【讨论】：

谢谢，我会试试 Gulp。以不同的方式为生产和开发构建整个前端呢？我想为生产和开发生成不同的 index.html。开发者将包含所有非缩小的 JS 和 CSS，而产品将只有一个缩小的 CSS 和一个缩小的 JS。对此有什么想法吗？
当然，您可以使用gulp-inject 来执行此操作，我已经更新了答案并提供了示例。