
<p>
  I'm using keystone.js with Jade view template engine, back-end is MongoDB, I
  didn't try Grunt at Keystone.js before, this blog is How I tried, it's not
  perfect but the output is close to what I want. So anyway, from browser source
  code point of view, following is what I want.
</p>
<ul>
  <li>Minify CSS/Javascript</li>
  <li>Minify Html</li>
  <li>
    In Development mode, I should have choice to not minify CSS/Javascrout, not
    minify HTML.
  </li>
</ul>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_2lahel4pj.png"
    alt=""
  />
</p>
<p>So following are list of things how I tried to make it happen.</p>
<h3>1. Grunt file setup</h3>
<pre><code class="language-javascript">
Use grunt-jade-usemin
</code></pre>
<p>
  First thing I'm doing here is use jadeUsemin setup task for jade template.
  Then, there are some clean up so I can make my web application work, which is
  copy task.
</p>
<pre><code class="language-javascript">
/*
 * 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'
    ]);
};

</code></pre>
<h3>Place Javascript/CSS files at Jade template</h3>
<p>
  Next thing to do is, add html comment as following for your javascript or CSS,
  the file path after the <code>build:js</code>will be the actual file path when
  run the Grunt task.
</p>
<p>
  There're some trick here, when I wrote the path start with slush
  <code>/</code>, grunt task will create this <code>post.js</code>to my local
  drive's root folder. If i didn't add the sluch then will create the file under
  my current application's root folder. That's why I'm doing cheat here at my
  copy task command. Something i think I need to figure out the better way to do
  it.
</p>
<pre><code class="language-javascript">
block js
	script(src='https://apis.google.com/js/platform.js', async='', defer='')
	
	//-&lt;!-- build:js /dist/js/post.js --&gt;
	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')
	//-&lt;!-- endbuild --&gt;
</code></pre>
<h3>Keystone.js init</h3>
<p>
  I copy all the jade template to another folder at Grunt task, because of this
  I need ability at keystone.js when in development/production use different
  view template.
</p>
<p>Following is what I did at keystone.js</p>
<pre><code class="language-javascript">
var viewPath = 'templates/compiled/views';
if (process.env.NODE_ENV === 'development') {
	viewPath = 'templates/views';
}
keystone.init({
	'views':  viewPath,
....
});
</code></pre>
<h3>Conclusion</h3>
<p>
  I'm happy that at Keystone.js I'm able to achieve following thing by using
  grunt task, on Production you'll get most optimized enviroment.
</p>
<ul>
  <li>Minify CSS</li>
  <li>Minify Javascript</li>
  <li>Minify HTML</li>
  <li>Ability to swich minify on/off in Development</li>
</ul>
<p>
  There are list of thing I don't think I'm doing it right, so need to figure
  out in the future.
</p>
<ul>
  <li>How to setup path at jade template</li>
</ul>


How to Use Grunt to setup task at Keystone.js for minify CSS, Javascript, HTML

How to Use Grunt with Keystone.js for Minify CSS, Javascript and HTML


<h2 style="font-family: 'Times New Roman'">
  Get Start Yeoman, Grunt and Brower with AngularJS, NodeJS
</h2>
<p style="display: inline !important">&nbsp;</p>
<div>
  <p>
    &nbsp; &nbsp; 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.&nbsp;
  </p>
</div>
<div>
  <p>
    &nbsp; &nbsp;So this blog I'll show how to get start use these technology to
    do a simple html template page.
  </p>
</div>
<div>
  <p>&nbsp; &nbsp;What you need is following.</p>
</div>
<div>
  <ul>
    <li>&nbsp; &nbsp; Internet connection (get download files)</li>
    <li>&nbsp; &nbsp; Node.js Installed</li>
    <li>&nbsp; &nbsp; Code Editor (I'm using sublime)</li>
    <li>&nbsp; &nbsp; Half an hour your time</li>
    <li>&nbsp; &nbsp; Love Coding</li>
  </ul>
  <div>
    <p>
      First go to your drive, type following at your Node.js command window.
    </p>
  </div>
</div>
<div>
  <pre class="language-javascript">
mkdir {your folder} cd {your folder}&nbsp;</pre
  >
</div>
<div>
  <p>
    After you create your working folder, type following, so it'll install yo
    man tools.
  </p>
</div>
<div>
  <pre class="language-javascript">npm install -g yo</pre>
</div>
<div>
  <p>
    Now, you're ready for create app using Yeoman. Type following to create a
    simple web app
  </p>
</div>
<div>
  <pre class="language-javascript">npm install -g generator-webapp</pre>
</div>
<div>
  <pre class="language-javascript">yo webapp</pre>
</div>
<div>
  <p>
    While you type the command, command window will ask you to add specific
    files, like Bootstrap.
  </p>
</div>
<div>
  <p>
    After everything setup correctly, following is what you should be able to
    see.
  </p>
</div>
<div>
  <p>&nbsp;</p>
</div>
<div class="image-preview">
  <a
    class="img-thumbnail"
    href="https://d1p0mp3f1fx0hz.cloudfront.net/_r7y59941t.png"
    rel="images"
    ><img
      class="img-load"
      src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/rxkohs7fjzaoo10iia6b.png"
      alt=""
      data-src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/rxkohs7fjzaoo10iia6b.png"
      data-id="rxkohs7fjzaoo10iia6b"
  /></a>
  <div class="glyphicon delete-pending" style="display: none">&nbsp;</div>
</div>
<p style="text-align: center">&nbsp;</p>
<p>App folder is the auto generated files include html, javascript and css.</p>
<p>If you just type following, grunt will generate a http server.</p>
<p>grunt server</p>
<p>&nbsp;</p>
<div class="image-preview">
  <a
    class="img-thumbnail"
    href="https://d1p0mp3f1fx0hz.cloudfront.net/_lqhy2v4vg.png"
    rel="images"
    ><img
      class="img-load"
      src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/c9lajm4xw4aeqvuslbco.png"
      alt=""
      data-src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/c9lajm4xw4aeqvuslbco.png"
      data-id="c9lajm4xw4aeqvuslbco"
  /></a>
  <div class="glyphicon delete-pending" style="display: none">&nbsp;</div>
</div>
<p>
  if you type following, grunt will create production ready files under dist.
</p>
<p>grunt</p>
<p>&nbsp;</p>
<p>
  then if you type grunt server:dist, browser will run again with the production
  ready files.
</p>
<p>Following is what you'll see.</p>
<p>&nbsp;</p>
<div class="image-preview">
  <a
    class="img-thumbnail"
    href="https://d1p0mp3f1fx0hz.cloudfront.net/_dlmeoazxa.png"
    rel="images"
    ><img
      class="img-load"
      src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/ngxhoi6c0djqmxvkhde8.png"
      alt=""
      data-src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/ngxhoi6c0djqmxvkhde8.png"
      data-id="ngxhoi6c0djqmxvkhde8"
  /></a>
  <div class="glyphicon delete-pending" style="display: none">&nbsp;</div>
</div>
<p style="text-align: center">&nbsp;</p>
<p>&nbsp;</p>
<p>Conclusion</p>
<p>
  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.
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p
  style="
    margin: 0px;
    color: #000000;
    font-family: 'Times New Roman';
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    orphans: auto;
    text-indent: 0px;
    text-transform: none;
    white-space: normal;
    widows: auto;
    word-spacing: 0px;
    -webkit-text-stroke-width: 0px;
    clear: both;
    text-align: left;
  "
>
  &nbsp;
</p>


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.

Category Grunt

How to Use Grunt with Keystone.js for Minify CSS, Javascript and HTML

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