Question

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

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

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

问题在于我想保留一个开发环境，其中文件不会被缩小，并且requirejs不会被编译。

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

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

Answer 1

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

几乎相同，虽然grunt指定了gulpfile.js中的所有配置，但gulp在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.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'))
});

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

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

就像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插件

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

并提供index.tpl.html

gulp index --development

然后，您只需运行gulp index --production或{{1}}

即可构建index.html

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

1 个答案: