Change path path with Grunt

Question

I have a problem with my application.

It will be all angular, but I need to know how I can change the path of my javascript according to my environment.

Example:

If I’m developing in the dev environment it will use the style.css,

If I generate a build it modifies to

> style.min.css

I’ve done this with java where I created a property file and it modified in my 3 environments (dev, devpreview, live)

NOTE: if Angularjs already has a native way to do this even better.

Can anyone tell if regex or Grunt plugin would work?

Example of my Gruntfile:

/*jshint node: true*/

module.exports = function (grunt) {
    'use strict';

    var jsRoot = 'js/**/*',
        jsBasePath = 'js/src/base.js',
        jsBootstrapPath = 'js/src/bootstrap.js',
        jsSrcPath = 'js/src/app/**/*',
        jsDistPath = 'js/dist/',
        srcMin = 'js/dist/src.min.js',
        jsOutputFile = 'js/dist/<%=pkg.name%>.js',
        jsOutputMinFile = 'js/dist/<%=pkg.name%>.min.js',
        thirdPartyPath = 'js/third-party/**/*',
        devTargetPath = '../../../target/app/',
        gruntFilePath = 'Gruntfile.js',
        cssRoot = 'css/**/*.css',
        cssOutputMinFile = 'css/style.min.css';

    // App source code. This is needed since the order matters when concatenating or minifying files
    var appSrc = [jsBasePath, jsSrcPath, jsBootstrapPath];

    var resources = [
        'bower_components/jquery/dist/jquery.js',
        'bower_components/jquery/dist/jquery.min.map',
        'bower_components/jquery/dist/jquery.min.js',
        'bower_components/jquery.scrollTo/jquery.scrollTo.js',
        'bower_components/jquery.scrollTo/jquery.scrollTo.min.js',
        'bower_components/jquery-ui/ui/jquery-ui.js',
        'bower_components/jquery-ui/ui/minified/jquery-ui.min.js',
        'bower_components/jquery-masonry/dist/masonry.pkgd.js',
        'bower_components/jquery-masonry/dist/masonry.pkgd.min.js',
        'bower_components/moment/moment.js',
        'bower_components/moment/locale/pt-br.js',
        'bower_components/moment/locale/es.js',
        'bower_components/angular/angular.js',
        'bower_components/angular/angular.min.js',
        'bower_components/angular-ui-router/release/angular-ui-router.js',
        'bower_components/angular-ui-router/release/angular-ui-router.min.js',
        'bower_components/angular-ui-sortable/sortable.js',
        'bower_components/angular-ui-sortable/sortable.min.js',
        'bower_components/angular-animate/angular-animate.js',
        'bower_components/angular-animate/angular-animate.min.js',
        'bower_components/angular-animate/angular-animate.min.js.map',
        'bower_components/angular-sanitize/angular-sanitize.js',
        'bower_components/angular-sanitize/angular-sanitize.min.js',
        'bower_components/angular-sanitize/angular-sanitize.min.js.map'
    ];

    var defaultTasks = ['jshint', 'uglify', 'concat', 'copy:mapfiles', 'cssmin'];
    var devTasks = ['jshint', 'concat', 'cssmin', 'copy:main'];
    var timestamp = new Date().getTime();

    // deleting css min file to avoid it to be included in itself next time
    if (grunt.file.exists(cssOutputMinFile)) {
        grunt.file.delete(cssOutputMinFile);
    }

    var config = {
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            files: [jsRoot, cssRoot],
            tasks: devTasks,
            options: {
                livereload: true
            }
        },
        jshint: {
            all: [appSrc, gruntFilePath],
            options: {
                jshintrc: true
            }
        },
        uglify: {
            dist: {
                src: appSrc,
                dest: srcMin,
                filter: 'isFile'
            }
        },
        concat: {
            options: {
                separator: '\n'
            },
            dev: {
                src: [
                    resources.filter(function(e) {return !e.match(/min/);}), // non-minified files
                    thirdPartyPath,
                    appSrc
                ],
                dest: jsOutputFile,
                filter: 'isFile',
                nonullFail: true
            },
            prod: {
                src: [
                    resources.filter(function(e) {return e.match(/min.js$/);}), // minified files
                    thirdPartyPath, 
                    srcMin
                ],
                dest: jsOutputMinFile,
                filter: 'isFile',
                nonullFail: true
            }
        },
        cssmin: {
            main: {
                src: cssRoot,
                dest: cssOutputMinFile
            }
        },
        copy: {
            main: {
                src: [jsRoot, cssRoot],
                dest: devTargetPath,
                options: {
                    process: function (content) {
                        if (!grunt.file.isDir(content)) {
                            return content.replace(/\$\{build\.timestamp\}/g, timestamp);
                        }
                    }
                }
            },
            mapfiles: {
                src: resources.filter(function(e) {return e.match(/map/);}), // map files
                dest: jsDistPath,
                expand: true,
                flatten: true
            }
        }
    };

    grunt.initConfig(config);

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('default', defaultTasks);
    grunt.registerTask('dev', devTasks);
};

Answer 1

You can do it like this:

You call the script with node grunt dev and seek the process.argv[2] to wear in a ternary.

I mean, change the line:

cssOutputMinFile = 'css/style.min.css';

for

cssOutputMinFile = process.argv[2] ? 'css/style.css' : 'css/style.min.css';

In the Node the process.argv is an array with the commands you use. in this example is ['node', 'grunt', 'dev'], that’s why you’re using the process.argv[2].