2

Estou com um problema na minha aplicação.

Ela será toda com angular, mas preciso saber como posso mudar o caminho do meu javascript de acordo com meu ambiente.

Exemplo:

Se eu estiver desenvolvendo no ambiente de dev ele usara o style.css,

Caso eu gere um build ele modifica para

> style.min.css

Já fiz isso com o java onde criei um arquivo de propriedade e ele modificava nos meus 3 ambientes (dev, devpreview, live)

OBS: se o AngularJS já tiver uma forma nativa de fazer isso melhor ainda.

Alguem sabe dizer se com regex ou com algum plugin do grunt funcionaria?

Exemplo do meu 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);
};
2
  • podes colocar aqui o teu Gruntfile?
    – Sergio
    Commented 26/02/2015 às 21:45
  • Claro @Sergio, coloquei acima na pergunta.
    – Edmo
    Commented 27/02/2015 às 13:21

1 Resposta 1

1

Podes fazer assim:

Chamas o script com node grunt dev e procuras o process.argv[2] para usar num ternário.

Ou seja, muda a linha:

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

para

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

No node o process.argv é uma array com os comandos que usas. neste exemplo é ['node', 'grunt', 'dev'], daí estar a usar o process.argv[2].

1
  • Boa Sergio, muito obrigado! Consegui aqui, Valeu mesmo. :)
    – Edmo
    Commented 2/03/2015 às 13:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .