## Table of Contents

1. [Introduction](#introduction)
2. [Grunt File Setup](#grunt-file-setup)
3. [Place JavaScript/CSS Files in Jade Template](#place-javascriptcss-files-in-jade-template)
4. [Keystone.js Init](#keystonejs-init)
5. [Conclusion](#conclusion)

## Introduction

I'm using Keystone.js with the Jade view template engine, and the back-end is MongoDB. I hadn't tried Grunt with Keystone.js before. This blog covers how I tried it — it's not perfect, but the output is close to what I want. From the browser source code point of view, here is what I wanted to achieve:

- Minify CSS/JavaScript
- Minify HTML
- In development mode, I should have the choice to not minify CSS/JavaScript and not minify HTML.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_2lahel4pj.png)

The following are the steps I took to make it happen.

## Grunt File Setup

```
Use grunt-jade-usemin
```

The first thing I'm doing here is using jadeUsemin to set up a task for the Jade template. Then, there is some cleanup so I can make my web application work, which is the copy task.

```
/*
 * grunt-jade-usemin
 *
 *
 * Copyright &copy;2014 Gilad Peleg
 * Licensed under the MIT license.
 */
'use strict';

module.exports = function (grunt) {
    // load all npm grunt tasks
    require('load-grunt-tasks')(grunt);
    // Project configuration.
    grunt.initConfig({
        // Before generating any new files, remove any previously-created files.
        clean: {
            tests: ['tmp', 'test/compiled']
        },
        filerev: {
            jadeUsemin: {
                options: {
                    noDest: true
                }
            }
        },
        // Configuration to be run (and then tested).
        jadeUsemin: {
            options: {
                replacePath: {
                    '#{baseDir}': 'test', //optional - key value to replace in src path
                    '#{baseDistPath}': '/'
                }
            },
            basic: {
                options: {
                    tasks: {
                        js: ['concat', 'uglify'],
                        css: ['concat', 'cssmin']
                    }
                },
                files: [
                    {
                        dest: 'templates/compiled/layouts/default.jade',
                        src: 'templates/layouts/default.jade'
                    }]
            }
        },
        copy: {
            // copy UI assets for development
            development: {
                cwd: 'public',
                src: '**/*',
                dest: 'public/public',
                expand: true
            },
            production: {
                cwd: '/dist',
                src: '**/*',
                dest: 'public/dist',
                expand: true
            },
            production_fonts: {
                cwd: 'public/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            },
            production_fontsAwesome: {
                cwd: 'bower_components/font-awesome-bower/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            }
        }
    });
    // Actually load this plugin's task(s).
    grunt.loadTasks('tasks');
    // Whenever the "test" task is run, first clean the "tmp" dir, then run this
    // plugin's task(s), then test the result.
    grunt.registerTask('[production]', [
        'jadeUsemin:basic',
        'copy:development',
        'copy:production',
        'copy:production_fonts',
        'copy:production_fontsAwesome'
    ]);
};
```

## Place JavaScript/CSS Files in Jade Template

The next thing to do is add HTML comments as follows for your JavaScript or CSS. The file path after `build:js` will be the actual file path when running the Grunt task.

There's a trick here: when I wrote the path starting with a slash `/`, the Grunt task created `post.js` in my local drive's root folder. If I didn't add the slash, it would create the file under my current application's root folder. That's why I'm using a workaround in my copy task command. I think I need to figure out a better way to do it.

```
block js
	script(src='https://apis.google.com/js/platform.js', async='', defer='')

	//-
	script(src='./public/js/shared/socials/facebook_sdk.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_core.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_facebook2.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_googlePlus.js', type='text/javascript')
	//-
```

## Keystone.js Init

I copy all the Jade templates to another folder in the Grunt task. Because of this, I need the ability in Keystone.js to use different view templates in development and production.

The following is what I did in Keystone.js:

```
var viewPath = 'templates/compiled/views';
if (process.env.NODE_ENV === 'development') {
	viewPath = 'templates/views';
}
keystone.init({
	'views':  viewPath,
....
});
```

## Conclusion

I'm happy that in Keystone.js I was able to achieve the following by using a Grunt task. In production, you'll get the most optimized environment:

- Minify CSS
- Minify JavaScript
- Minify HTML
- Ability to switch minification on/off in development

There are a few things I don't think I'm doing right, so I need to figure them out in the future:

- How to set up paths in the Jade template correctly

How to use Grunt to set up tasks in Keystone.js for minifying CSS, JavaScript, and HTML.

How to Use Grunt with Keystone.js for Minifying CSS, JavaScript, and HTML


##
Get Start Yeoman, Grunt and Brower with AngularJS, NodeJS

I really like work with this fast, modern web development
after try a simple html template provide by Yeoman. Run the build task with
Grunt, search additional library with Brower. All that make the web
development very simple and fast. In additional with client side technology
AngularJS and backend-side NodeJS.

So this blog I'll show how to get start use these technology to
do a simple html template page.

What you need is following.

    - Internet connection (get download files)

    - Node.js Installed

    - Code Editor (I'm using sublime)

    - Half an hour your time

    - Love Coding

First go to your drive, type following at your Node.js command window.

```
mkdir {your folder} cd {your folder}


  After you create your working folder, type following, so it'll install yo
    man tools.


  npm install -g yo
```

Now, you're ready for create app using Yeoman. Type following to create a
simple web app

```
npm install -g generator-webapp
```

```
yo webapp
```

While you type the command, command window will ask you to add specific
files, like Bootstrap.

After everything setup correctly, following is what you should be able to
see.

[![](http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/rxkohs7fjzaoo10iia6b.png)](https://d1p0mp3f1fx0hz.cloudfront.net/_r7y59941t.png)

App folder is the auto generated files include html, javascript and css.

If you just type following, grunt will generate a http server.

grunt server

[![](http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/c9lajm4xw4aeqvuslbco.png)](https://d1p0mp3f1fx0hz.cloudfront.net/_lqhy2v4vg.png)

if you type following, grunt will create production ready files under dist.

grunt

then if you type grunt server:dist, browser will run again with the production
ready files.

Following is what you'll see.

[![](http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/ngxhoi6c0djqmxvkhde8.png)](https://d1p0mp3f1fx0hz.cloudfront.net/_dlmeoazxa.png)

Conclusion

I have used ASP.NET MVC bundler system or some other company build bundler
system. But I like this way of doing web client side development.It makes you
looks cool.(haha) Simple to understand and get start.


Get Start Yeoman, Grunt and Brower with AngularJS, NodeJS    I really like work with this fast, modern web development after try a simple html template provide by Yeoman. Run the buildtask with Grunt, search additional library with Brower. All that make the web development very simple and fast. In additional withclient side technology AngularJS and backend-side NodeJS.

Grunt

How to Use Grunt with Keystone.js for Minifying CSS, JavaScript, and HTML

How to Use Yeoman, Brower, Grunt, Angular.js and Node.js