Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Using Gruntfile.js?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #168007
    Steven Morgan
    Participant

    Hey guys, I’ve gotten on the Grunt train and liking it.
    I was just wondering what are some of the best practices when using it? As far as combining files? Also, what are some must use plugins?
    I will use it mostly for WordPress, so far I run uglify, sass, and watch in it.

    As for handling files I’m wondering what you do? Do you concatenate and combine all of your JS files into one? Or have a global.js and then conditional JS files?

    So best practices and must have plugins, or anything else Grunt related.
    Thanks

    #168080
    Chromawoods
    Participant

    Plugins totally vary depending on the size and complexity of the project. The ones I usually use regardless are: jshint, concat, uglify, sass and watch

    And then as the project grows, more might be needed (I probably forgot some):

    bump – for better controlling the version of your app
    yuidoc – if more devs are working on the same project, documentation is nice
    copy – depending on different vars or environments, sometimes you don’t want to process a file, just copy it to another location
    replace – I sometimes use this to replace strings in my JS-config module. For example, it can replace something like devMode = %DEV_MODE%; to devMode = true; depending on Grunt params
    newer – only operate on src files that have actually changed
    imagemin – optimize images

    #168160
    jamygolden
    Member

    To add to that list, at times I also use:
    Connect – Runs an html file server
    Clean – Empty’s a folder. Useful for when you have different production and development folders. I generally use this with the copy task mentioned above.
    Requirejs – Compiles require js
    Replace – Replaces text in files. I’ve used this before to swap out the html requirejs script include with the compiled version for production.

    #168265
    dgriesel
    Participant

    @TheDoc: I had the same problem with gulp, my solution was naming the files in the order they had to be compiled:

    01 - util.coffee
    02 - some-more-shared-stuff.coffee
    ...
    11 - page-specific-1.coffee
    12 - page-specific-2.coffee
    ...
    99 - top-level_depends-on-everything-else.coffee
    

    Maybe that’s a solution for you?

    #168409
    jamygolden
    Member

    Hey guys :)

    @TheDoc
    yeah I think that’s a good article idea. I’ll see if I can get that done this week. I’ll reply to this thread today with the basic steps and you guys can let me know if anything is too confusing. Do you use requirejs usually or just not with coffeescript? I don’t use coffeescript myself.

    #168658
    jamygolden
    Member

    First to get requirejs working:

    Link to require script in HTML:
    <script data-main="js/config" src="js/vendor/require.js"></script>
    js/config points to the js/config.js file and the src points to the requirejs lib.

    config.js:

        require.config({
            baseUrl: 'js',
            deps: ['main'],
            shim: {
                // Assuming you have global plugins
                'vendor/jquery': {
                    exports: '$'
                }
            }
        });
    

    main.js

        require([
            'example'
        ],
            function (example) {
                example.init();
        });

    example.js

        define(function () {
    
        var example = {
            init: function() {
                alert('Example ran');
            }
        };
    
        return example;
    });
    

    Your require scripts should be working within the browser

    As for Grunt:

    Assuming you have a project set up as follows:

        - GruntFile.js
        - package.json
        - js
            - config.js
            - main.js
            - vendor
                - almond.js
                - jquery.js
    

    https://github.com/jrburke/almond
    You can pretend that almond is part of requirejs. It allows for require to compile to a js file that is completely independant of require (how I imagine most people think it should be anyway).

    The requirejs npm grunt package should be added to grunt correctly. https://www.npmjs.org/package/grunt-contrib-requirejs

    In case anyone is confused about as to how it’s done, check out https://css-tricks.com/grunt-people-think-things-like-grunt-weird-hard/
    Add the following to the to the devDependencies object in the package.json file:
    "grunt-contrib-requirejs": "^0.4.3",

    requirejs: {
        compile: {
            options: {
                baseUrl: 'js', // relative to GruntFile.js
                name: 'vendor/almond', // relative to baseUrl
                deps: ['main'], // relative to baseUrl
                mainConfigFile: 'js/config.js', // relative to GruntFile.js
                optimize: 'uglify',
                out: 'js/site.js' // relative to GruntFile.js
            }
        }
    }
    

    Running grunt should create a js/site.js file. You now point you script to that file for production use.

    I’ll create a quick github repo with a working example of all of this. Let me know if anything is confusing.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.