Using grunt for building prod/dev environment on frontend app

Question

My application is currently only a frontend and I use grunt to do the following:

copy the necessary CSS and JS from bower_components into the right directories
run jshint
build documentation

I'd like to go a bit deeper into the deployment process by compiling my Handlebars templates, compiling the requirejs modules and minifying the resulting JS and all my CSS.

The problem is that I'd like to keep a development environment where the files arent't minified and the requirejs are not compiled.

How can I achieve this? Specifically, should I template my index.html so that it uses either a single CSS for the prod environment and the multiple CSS for the dev env?

Here is the link to my sources: https://github.com/lilorox/darts/tree/dev (dev branch is the most recent).

Answer 1

I used to try using grunt, but when the configuration is getting bigger, I found myself pretty confused by the configuration over the grunt. I'd try to give a suggestion by using gulp for your front-end building tools. It's much simple, easier to read and faster. You can read the differences here .

Pretty much the same, while grunt specified all the configuration in gruntfile.js , gulp specified its configuration in gulpfile.js . Usually I would created my own configuration in extra file which I named gulpfile.config.js . It would looks like this :

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'
        }

    }
}

And in gulpfile.js, I can simply run the task based on the environment that I've configured in 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'))
});

Just like grunt, gulp offers abundant of cool plugins for building your front-end apps. I myself usually use gulp-less, gulp-minify-css, gulp-ng-annotate, gulp-uglify, gulp-concat, gulp-server-livereload, gulp-rename, gulp-inject, gulp-imagemin. And of course you can explore much other plugins. Hope this helps!

[UPDATED - Build index.html based on environment]

First you need to configure the task and require all gulp plugins

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

And provide the index.tpl.html

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

Then you can simply build the index.html by running gulp index --development or gulp index --production

Using grunt for building prod/dev environment on frontend app

Question

1 answers

solution1
1 ACCPTED 2016-04-28 10:49:58

Using grunt for building prod/dev environment on frontend app

Question

1 answers

solution1 1 ACCPTED 2016-04-28 10:49:58

solution1
1 ACCPTED 2016-04-28 10:49:58