mhulse / grunt-html-boiler Goto Github PK

For better organization.

... the watch command will run a development build any time these folders/file(s) change:

… change to:

… the `watch` command will run a development build any time these folders/file(s) change:

http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

/*----------------------------------( PREPROCESS )----------------------------------*/

/**
 * Grunt task around preprocess npm module.
 *
 * @see https://github.com/onehealth/grunt-preprocess
 * @see https://github.com/onehealth/preprocess
 * @see http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
 */

preprocess : {

    options : {

        context : {

            title : '<%= pkg.title %>',
            description : '<%= pkg.description %>',
            name : '<%= pkg.name %>',
            version : '<%= pkg.version %>',
            homepage : '<%= pkg.homepage %>',
            production : '<%= pkg.production %>',
            now : '<%= now %>',
            ver : '<%= ver %>',

        },

    },

    dev : {

        expand : true,
        cwd : './files/templates/',
        src : [
            '**/*.html',
            '!latest.html',
        ],
        dest : '../dev/',

    },

    prod : {

        expand : true,
        cwd : './files/templates/',
        src : [
            '**/*.html',
            '!latest.html',
        ],
        dest : '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',

    },

    redirect : {

        src : './files/templates/latest.html',
        dest : '../prod/index.html',

    },

},

Just to show that one can process may files.

See: #17

The copy task for prod has been simplified. Make sure I'm not copying produciton files/assets that aren't needed for that build type (like, non-uglified scripts).

Note: The production build’s asset files are absolutely linked to the production server; hence the need to push the latest files there before previewing the production’s HTML file and related assets.

Update production theme:

Finally, in a real world scenario, you would update the asset path by updating the URL to your latest production build. For example, here’s a simple PHP function one could use in a WordPress functions.php file:

Demo HTML

And last para above needs to clarify location.

Make sure GruntFile has trailing commas on everything.

I thought I had this setup. Look into it.

Might be nice to require the dev build when doing a prod build.

For example, before:

grunt.registerTask('prod', ['init', 'env:prod', 'clean:prod', 'sass:prod', 'uglify:prod', 'preprocess:prod', 'copy:prod',]);

… after:

grunt.registerTask('prod', ['init', 'dev', 'env:prod', 'clean:prod', 'sass:prod', 'uglify:prod', 'preprocess:prod', 'copy:prod',]);

That way one can't forget.

Like:

http://yeoman.io/generators/

Might be cool to setup a symbolic link using https://github.com/gruntjs/grunt-contrib-symlink for Bower plugins (thus, avoiding manual creation of said links).

I use a slightly new system. Kinda not the point of this repo, but since I'm using a variables file anyway for demo purposes, I might as well updated to be more in line with my latest approach for SASS variable naming/usage.

Would be nice to a full-on template language. Need to research.

Running $ grunt out of the box results in the following error:

Running "jshint:init" (jshint) task

./Gruntfile.js
56 | ' /\n\n',
^ Extra comma. (it breaks older versions of IE)
93 | verbose: true, // Debug output.
^ Extra comma. (it breaks older versions of IE)
95 | },
^ Extra comma. (it breaks older versions of IE)
97 | },
^ Extra comma. (it breaks older versions of IE)
117 | './files/templates/__/',
^ Extra comma. (it breaks older versions of IE)
121 | tasks: ['default'],
^ Extra comma. (it breaks older versions of IE)
138 | jshintrc: '.jshintrc', // Defined options and globals.
^ Extra comma. (it breaks older versions of IE)
145 | './files/scripts/<%= pkg.name %>..js',
^ Extra comma. (it breaks older versions of IE)
147 | ],
^ Extra comma. (it breaks older versions of IE)
163 | NODE_ENV: 'DEVELOPMENT',
^ Extra comma. (it breaks older versions of IE)
169 | NODE_ENV: 'PRODUCTION',
^ Extra comma. (it breaks older versions of IE)
171 | },
^ Extra comma. (it breaks older versions of IE)
187 | force: true, // Allows for deletion of folders outside current working dir (CWD). Use with caution.
^ Extra comma. (it breaks older versions of IE)
193 | '../dev/__/',
^ Extra comma. (it breaks older versions of IE)
200 | '../index.html',
^ Extra comma. (it breaks older versions of IE)
202 | ],
^ Extra comma. (it breaks older versions of IE)
221 | banner: '<%= banner.short %>',
^ Extra comma. (it breaks older versions of IE)
233 | './files/scripts/<%= pkg.name %>.init.js',
^ Extra comma. (it breaks older versions of IE)
234 | ],
^ Extra comma. (it breaks older versions of IE)
238 | },
^ Extra comma. (it breaks older versions of IE)
240 | },
^ Extra comma. (it breaks older versions of IE)
259 | sourcemap: 'none', // Generate CSS source maps?
^ Extra comma. (it breaks older versions of IE)
268 | style: 'expanded', // Output style. Can be nested, compact, compressed, expanded.
^ Extra comma. (it breaks older versions of IE)
275 | '../dev/styles/development.css': './files/styles/development.scss',
^ Extra comma. (it breaks older versions of IE)
277 | },
^ Extra comma. (it breaks older versions of IE)
286 | style: 'compressed',
^ Extra comma. (it breaks older versions of IE)
292 | '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/styles/<%= pkg.name %>.min.css': './files/styles/<%= pkg.name %>.scss',
^ Extra comma. (it breaks older versions of IE)
294 | },
^ Extra comma. (it breaks older versions of IE)
296 | },
^ Extra comma. (it breaks older versions of IE)
324 | version: '<%= pkg.version %>',
^ Extra comma. (it breaks older versions of IE)
326 | },
^ Extra comma. (it breaks older versions of IE)
341 | '!latest.html',
^ Extra comma. (it breaks older versions of IE)
343 | dest: '../dev/',
^ Extra comma. (it breaks older versions of IE)
345 | },
^ Extra comma. (it breaks older versions of IE)
347 | ],
^ Extra comma. (it breaks older versions of IE)
360 | 'index.html',
^ Extra comma. (it breaks older versions of IE)
362 | dest: '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',
^ Extra comma. (it breaks older versions of IE)
367 | dest: '../prod/index.html',
^ Extra comma. (it breaks older versions of IE)
369 | },
^ Extra comma. (it breaks older versions of IE)
371 | ],
^ Extra comma. (it breaks older versions of IE)
373 | },
^ Extra comma. (it breaks older versions of IE)
399 | '!/source/',
^ Extra comma. (it breaks older versions of IE)
401 | dest: '../dev/',
^ Extra comma. (it breaks older versions of IE)
403 | },
^ Extra comma. (it breaks older versions of IE)
405 | ],
^ Extra comma. (it breaks older versions of IE)
420 | '!/junk/',
^ Extra comma. (it breaks older versions of IE)
422 | dest: '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',
^ Extra comma. (it breaks older versions of IE)
428 | dest: '../index.html',
^ Extra comma. (it breaks older versions of IE)
430 | },
^ Extra comma. (it breaks older versions of IE)
434 | ],
^ Extra comma. (it breaks older versions of IE)

Too many errors. (90% scanned).

51 errors in 5 files

$ curl -#L https://github.com/mhulse/gh-boiler/tarball/master | tar -xzv --strip-components 1 --include=*/{.editorconfig,.gitattributes,.gitignore} --exclude=*/**/*

Booyah!

Might want to mention:

1. Importance of having the dev and prod builds separate; having one replace the other (in terms of generated files) is not optimal. You want to have the ability to view both at same time; more importantly, you'll also want to make sure your production builds always point to production-built files (if dev replaces prod, there's always a possibility that your production site could end up using dev-built files). I mention this because I've worked with setups where the dev build wiped out the prod build and vice versa.
2. Having my "build" code, or "source", a level deep. The point is the code becomes a bit more organized in the instances where the root level needs to have boilerplate files, grunt-generated files and/or demo folders grunt-js-boiler is a good example of this. There may be times where visitors don't care about the source files and want to go directly to the end result. IMHO, having source files in a sub-folder allows the overall setup to be more clean.
3. Other?

Change name to _variable.scss. I like singular better.

https://github.com/taptapship/wiredep

I find that I change this NS for every project. It's kinda an annoying step.

Couple of options:

1. Make the default NS (i.e., ghb) something more generically useful, like MAH (my initials?) or NS (for namespace?).
2. Document steps needed to take to change.
3. Live with ghb?

I'd like to roll with the first thought. NS might be nice and good … Maybe use NS and document steps needed to change?

Needed in package.json.

'!**/junk/**',

Useful pattern for placeholder image junk folders, or things like /fonts and /psd.

Use above pattern to organize cruft.

Comes with live reload:

https://github.com/gruntjs/grunt-contrib-connect

Via @iamchriswick in #35:

But, the name "build" confused me a bit, cause for me build sounds like something that has been built.

Maybe like this:

grunt-html-boiler
├── build
│ ├── dev
│ │ ├── images
│ │ ...
│ ├── prod
│ │ ├── 1.0.0
│ │ ...
├── work
│ ├── files
│ │ ├── .jshintrc
│ │ ├── Gruntfile.js
│ │ ├── README.md
│ │ ├── bower.json
│ │ ├── README
│ │ └── package.json
│ .editorconfig
│ .gitattributes
│ .gitignore
│ file001.txt
│ CONTRIBUTING.md
│ LICENSE
│ README.md
│ index.html

Add starter kit psd/png/ico files to this repo.

Would be nice to come up with a pattern I can use to easily ignore source asset files via the GruntFile copy and other tasks.

Currently I have folder names like psd or ai and junk. The junk works well to ignore: '!**/junk/**',, but I think it would be good to have a similar generic name for source files. The name source would work, but I already use /source at the root level, and I think using that name in two different contexts could be confusing. My gut is telling me to change the root name source to something else (like build/ maybe?) then I could use source/ in the children folders without feeling like I'm bastardizing the name.

Now I can ditch the preprocess misc:

/*----------------------------------( PREPROCESS )----------------------------------*/

/**
 * Grunt task around preprocess npm module.
 *
 * @see https://github.com/onehealth/grunt-preprocess
 * @see https://github.com/onehealth/preprocess
 * @see http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
 */

preprocess : {

    options : {

        context : {

            title : '<%= pkg.title %>',
            description : '<%= pkg.description %>',
            name : '<%= pkg.name %>',
            version : '<%= pkg.version %>',
            homepage : '<%= pkg.homepage %>',
            production : '<%= pkg.production %>',
            now : '<%= now %>',
            ver : '<%= ver %>',

        },

    },

    dev : {

        files: [

            {

                expand : true,
                cwd : './files/templates/',
                src : [
                    '**/*.*', // Greedy!
                    '!latest.html',
                ],
                dest : '../dev/',

            },

        ],

    },

    prod : {

        files: [

            {

                expand : true,
                cwd : './files/templates/',
                src : [
                    'index.html',
                ],
                dest : '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',

            }, {

                src : './files/templates/latest.html',
                dest : '../prod/index.html',

            },

        ],

    },

},

/*----------------------------------( COPY )----------------------------------*/

/**
 * Copy files and folders.
 *
 * @see https://github.com/gruntjs/grunt-contrib-copy
 * @see http://gruntjs.com/configuring-tasks#globbing-patterns
 */

copy : {

    dev : {

        files : [

            {

                expand : true,
                cwd : './files/',
                src : [
                    'images/**/*',
                    'pages/**/*',
                    'scripts/**/*',
                ],
                dest : '../dev/',

            },

        ],

    },

    prod : {

        files : [

            {

                expand : true,
                cwd : './files/',
                src : [
                    'images/**/*',
                ],
                dest : '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',

            },

        ],

    },

},

https://github.com/mhulse/grunt-html-boiler/blob/gh-pages/source/Gruntfile.js#L230-L232

Change ghb to <%= pkg.name %>.

https://help.github.com/articles/relative-links-in-readmes

Future-proof the docs.

"deploy:stage": "rsync -avz -e \"ssh -p 1234\" dist/ [email protected]:/etc/path/to/vhost/dir/",

The above taken from a work project that uses rsync to deploy only the needed folders to make site and/or assets hosted on dev/prod servers.

I kinda like this over using git and pulling the full repo; instead, use rsync to push only the code needed.

In the target dirs, instead of css for a folder name, use styles. This makes sense to me because I retain scripts name from source to dev/prod folders.

Here: https://github.com/mhulse/purely-packery

In your instruction you say that one can optionally, install the latest Bower plugin versions via $ grunt bower and that this this will install plugins (as defined in source/bower.json) into the source/files/plugins/ directory.

I can't seem to find either the source directory or a bower.json present in this repository...

See:

gruntjs/grunt-contrib-sass#200

Use this instead:

https://github.com/mattstyles/grunt-banner

In gulp, and should be the same in grunt, I can do:

gulp.src([
    'files/scripts/!(main)*.js',
    'files/scripts/main.js',
])

This allows me to glob, but then specify some sort of sane order.

… For a more basic real word example, see Drone. I used grunt-html-boiler as a starting point Drone. 👍

Might be nice to copy a production index.html page to the root of repo for easy viewing/hosting all from one location:

copy : {

    dev : {

        files : [

            {

                expand : true,
                cwd : './files/',
                src : [
                    'images/**/*',
                    'pages/**/*',
                    'scripts/**/*',
                ],
                dest : '../dev/',

            },

        ],

    },

    prod : {

        files : [

            {

                expand : true,
                cwd : './files/',
                src : [
                    'images/**/*',
                ],
                dest : '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/',

            }, {

                // COPY INDEX TO ROOT:
                src: '../prod/<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
                dest: '../index.html',

            },

        ],

    },

},

The grunt-bower-task repo hasn't been updated since NOV 2013.

Make note in README that one can run grunt locally instead of installing globally with this:

  "scripts": {
    "dev": "grunt",
    "prod": "grunt prod"
  }

Change or allow package.json to run "grunt" all by itself; this would allow for any task name or command line flags to be passed after command which is a bit more flexible.