cmegown
cmegown

Reputation: 401

Grunt.js DEV vs PROD tasks

Just started learning some Grunt (as well as the alternative - gulp.js), and I'm running into some confusion that I can't seem to figure out by myself. I understand how you can define different tasks for different environments in order to be efficient and increase performance, but where I'm getting stuck is how exactly one would utilize those two types of tasks.

Question 1: Let's say I have an images directory that I don't want to run grunt-contrib-imagemin on during development, but do want to run it during production so that the 'processed' images live in images/build. How do I account for that in my file paths? Is there a way to automate that?

Question 2: I'm no dev, and I have little experience with any sort of server configuration, so I'm confused when people say "run grunt build on your server". Where would that happen? Is that even possible on something like a cheap, shared host like iPage?

I'm really trying to expand my knowledge with the build tools, so any and all advice or comments are welcome. Thanks for taking the time!

Upvotes: 2

Views: 2332

Answers (1)

blessanm86
blessanm86

Reputation: 31779

  1. You need to specify different tasks for development and production. Something like

    grunt.initConfig({
        imagemin: {
            dev: {
              // dev server minify config
            },
            prod: {
              // production server minify config
            }
        },
        devtask: {
            //Some task for development mode
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('devtask');
    
    grunt.registerTask('default', ['devtask']);
    grunt.registerTask('dev', ['devtask']);
    grunt.registerTask('prod', ['imagemin:prod']);
    

    Now if you enter 'grunt dev' in the terminal, grunt runs just the 'devtask'. Just 'grunt' will run the tasks listed in 'default' which is same as 'grunt dev'.

    If you enter 'grunt prod', grunt runs the prod target of imagemin task.

    So now imagemin only runs for production.

    Tinker with the 'src' and 'dest' property of imagemin task to get the output in 'images/build'. You can specifiy the 'cwd' property to tell the file paths.

  2. To do these stuff on server side, you need NodeJS. Some web hosting companies offer that. You will need to check with yours. I just normally do the grunt step on my development machine and then transfer the output files to the server via ftp. This step can also be done by grunt via many of the available grunt ftp plugins.

Upvotes: 3

Related Questions