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

Question

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

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

我想通过编译我的 Handlebars 模板、编译 requirejs 模块并缩小生成的 JS 和我所有的 CSS.

来更深入地了解部署过程

问题是我想保留一个开发环境，在这个环境中，文件不会被缩小，requirejs 也不会被编译。

我怎样才能做到这一点？具体来说，我是否应该为我的 index.html 设置模板，以便它为生产环境使用单个 CSS 而为开发环境使用多个 CSS？

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

Answer 1

我曾经尝试过使用g运行t，但是当配置越来越大时，我发现自己对g运行t上的配置感到很困惑。我会尝试使用 gulp for your front-end building tools. It's much simple, easier to read and faster. You can read the differences here 给出建议。

几乎相同，g运行t指定了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'))
});

就像 g运行t 一样，gulp 提供了大量很酷的插件来构建您的前端应用程序。我自己通常使用 gulp-less, gulp-minify-css, gulp-ng-annotate, gulp-uglify, gulp-连接，gulp-server-livereload，gulp-重命名，gulp-注入，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>

然后您可以通过运行ning gulp index --development 或 gulp index --production

简单地构建 index.html

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

Using grunt for building prod/dev environment on frontend app

javascript

css

requirejs

handlebars.js

gruntjs