my experiments

Never stop experimenting!

WebGL with ThreeJS, RaphaelJS, Phonegap, wizCanvas, JavaScript Loop Performance

Click on the links below to see experiments:

• SVG animated button with Raphael.js
• wizCanvas app start - fast canvas for phonegap
• Offcanvas navigation for phonegap
• Canvas 3 layers' animation with "globalCompositeOperation"
• Mobile Navigation Button - SVG animated
• simple WebGL scene with THREE.js
• THREE.js scene, background, plane, hexagon
• For each loop through JavaScript object - performance check
• Spreadsheet data display
• Side Navigation Icon - SVG animated button with Raphael

Automatic minification and concatenation of JavaScript files with Grunt

Automatic minification and concatenation of JavaScript files

I'll try to demonstrate how easy it is for you to set up your project with basic Grunt automatic deployment.

I'll show a very simple configuration for minification and concatenation of your javascript modules. To make this work you ought to have NodeJS already installed on your machine. I use version 0.10.18 and npm version 1.3.8. These versions are available at the time of writing this post.

Here you can download the code from github.

This post will be divided into 2 sections:

1. setup your local test project

2. setup grunt file

Setup your local test project

First step is to create a package.json file in your project's folder:

package.json:

 {  
  "name": "grunt-test",  
  "version": "0.0.1-1",  
  "private": false,  
  "scripts": {  
   "start": "app.js"  
  },  
  "dependencies": {  
   "grunt": "~0.4.2",  
   "grunt-contrib-concat": "~0.3.0",  
   "grunt-contrib-uglify": "~0.2.5"  
  },  
  "subdomain": "localhost",  
  "domains": [  
   "localhost"  
  ],  
  "engines": {  
   "node": "0.10.x"  
  }  
 }  

Now, using command line go to the folder where your package.json file is and use npm install command to install all your "dependencies" (node modules).

As soon as you finish downloading all of the dependencies, create our main app file - app.js.
This one is meant to be very simple in this tutorial, with only one node dependency ("connect") to enable you to see the results of minification and concatenation.

app.js:

 var connect = require('connect');  
 connect.createServer(  
  connect.static(__dirname)  
 ).listen(8080);  

Now in the same folder as package.json and app.js create our index.html.

index.html:

 <html>  
 <head>  
  <title>Grunt test</title>  
 </head>  
 <body>  
  <h2>Hello Grunt</h1>  
  <p>Press F12 and go to Console</p>  
 <!-- this is our minified and concat version of js -->  
 <script type="text/javascript" src="public/js_dist/app.js"></script> </body>  
 </html>  

The last step is the creation of your js files which you are going to minifi and merge. Create "public/js/" folder and "public/js_dist" folder.
Inside "public/js/" create "module_one.js" and "module_two.js".

module_one.js:

 (function () {  
  console.log('hello world - this is the first module');  
 })();  

module_two.js:

 (function () {  
  console.log('... and our second module');  
 })();  

Setup Grunt

Create Gruntfile.js in the root directory. This file is responsible for telling Grunt what to do when we run grunt commands.

 'use strict';  
 module.exports = function (grunt) {  
  /* The main configuration for your dev env. Put all your magic here */  
  grunt.initConfig({  
   pkg: grunt.file.readJSON('package.json'),  
   concat: {  
    options: {  
     separator: ";"  
    },  
    dist: {  
     src: ['public/js/*.js'],  
     dest: 'public/js_dest/app.js'  
    }  
   },  
   uglify: {  
    options: {  
     banner: "/* here you can put some comments about your app */"  
    },  
    dist: {  
     files: {  
      "public/js_dest/app.js": ['<%= concat.dist.dest %>']  
     }  
    }  
   }  
  });  
  /* tell Grunt what deps you want to load */  
  grunt.loadNpmTasks('grunt-contrib-uglify');  
  grunt.loadNpmTasks('grunt-contrib-concat');  
  /* register our "grunt build" task */  
  grunt.registerTask('build', ["concat", "uglify"]);  
 };  

Rememeber:- we use "initConfig" method to define actions we want Grunt to perform
- we use "loadNpmTasks" to load plugins
- we use "registerTask" to define grunt commands

Now, use grunt build command in your root directory. Voila! Our modules should be minified and concatenated.

Now, using command line go to your project folder where you should be able to run node app.js command. In your favorite browser go to http://localhost:8080 to see the page. In the dev tools console you should see the texts from the "console.log" in two modules.

Remember, that our modules should be independent of one another if you want to use this method alone to develop your application. You might get confused on the order modules are concatenated at some point. Very good idea is to use e.g. RequireJS to be sure when and where our modules are loaded.

For more blog posts go to http://ds-web-dev.com/blog.

This post has been inspired by HTML5DevConf " Continuous Delivery for JavaScript Applications" presentation.

Reference

• http://gruntjs.com/getting-started
• http://dailyjs.com/2012/11/29/backbone-tutorial-1/
• http://code.tutsplus.com/tutorials/a-requirejs-backbone-and-bower-starter-template--net-29211
• http://coding.smashingmagazine.com/2013/10/29/get-up-running-grunt/
• http://www.frontendfrontline.com/2013/10/add-compass-to-your-grunt-setup.html

SASS compilation with Grunt

Sass files compilation with Grunt

This is a demonstration of how to set up a basic automatic compilation of Sass files with "grunt-compass" and "grunt-contrib-watch". At the end of this tutorial, you should be able to run "grunt watch_sass" command to make grunt init compass to look for changes in your Sass files. Compass should detected any changes and compile your files.

You can download the demo in this repo.

You should have Ruby, Sass, NodeJS already installed on your windows machine before you continue.

Once you're sure the above software is installed correctly on your machine create a package.json file in your project's directory, e.g.:

 {  
  "name": "grunt-test",  
  "version": "0.0.1-1",  
  "private": false,  
  "devDependencies": {  
   "grunt": "~0.4.2",  
   "grunt-contrib-watch": "~0.4.4",  
   "grunt-compass": "0.3.9"  
  },  
  "engines": {  
   "node": "0.10.x"  
  }  
 }  

In your command line go to project's folder directory and type "npm install" command to get all of the dependencies to your project's folder.

Now create a "public/css" directory with "sass" and "stylesheets" folders. Place a few ".scss" files in the "sass" folder with some random styles.

Next, create a "Gruntfile.js". This is the place where we'll have all of our grunt's commands and settings defined. 

"grunt development" command

Let's begin with "grunt development" command. Please remember that you may change the names for your grunt commands - "development" and "watch_sass" are just examples. For this task our Gruntfile.js may look like this:

 'use strict';  
 module.exports = function(grunt) {  
  // Project configuration.  
  grunt.initConfig({  
   compass: {  
    prod: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'compressed', //other options are: nested, compact, expanded  
     linecomments: false,  
     forcecompile: true  
    }  
   }  
  });  
  // plugin tasks  
  grunt.loadNpmTasks('grunt-compass');  
  /* Default command "grunt" or "grunt development" - compiles files from "public/css/sass" to 'public/css/stylesheets' already compressed */  
  grunt.registerTask('default', 'compass:prod');  
  grunt.registerTask('development', 'compass:prod');  
 };  

We already should have "grunt" and "grunt development" commands set. Both should accomplish the same task due to the fact that they perform the same operation "compass:prod". They ought to create compiled CSS files in "public/css/stylesheets" directory.

"Grunt watch_sass" command

As mentioned before, "grunt watch_sass" will watch your sass files for changes. We have to load the grunt plugin "grunt-contrib-watch":

  grunt.loadNpmTasks('grunt-contrib-watch');

Then define some configuration in "grunt.initConfig()", e.g.:

 watch: {  
  compass: {  
   files: ['public/css/sass/*.scss',  
    'public/css/sass/**/*.scss'], //defined files to watch for  
   tasks: ['compass:dev'] //task to run after the change is detected  
  }  
 }  

and register the task with Grunt:

grunt.registerTask('watch_sass', 'watch:compass');

Now, from the command line, you should be able to run "grunt watch_sass" successfully and follow all of your changes in the files defined in "watch.compass.files" array.

Please find the full "Gruntfile.js" file below for your reference.

 'use strict';  
 module.exports = function(grunt) {  
  // Project configuration.  
  grunt.initConfig({  
   watch: { // for development run 'grunt watch'  
    options: {  
     nospawn: true  
    },  
    compass: {  
     files: ['public/css/sass/*.scss',  
         'public/css/sass/**/*.scss'],  
     tasks: ['compass:dev']  
    }  
   },  
   compass: {  
    dev: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'expanded', //nested, compact, compressed, expanded  
     linecomments: true,  
     check: true //check syntax  
    },  
    prod: {  
     src: 'public/css/sass',  
     dest: 'public/css/stylesheets',  
     outputstyle: 'compressed', //nested, compact, compressed, expanded  
     linecomments: false,  
     forcecompile: true  
    }  
   }  
  });  
  // plugin tasks  
  grunt.loadNpmTasks('grunt-compass');  
  grunt.loadNpmTasks('grunt-contrib-watch');  
  // Default command "grunt" or "grunt development"- compiles to production  
  grunt.registerTask('default', 'compass:prod');  
  grunt.registerTask('development', 'compass:prod');  
  // command "grunt watch_sass" tells grunt to watch for changes in your files  
  grunt.registerTask('watch_sass', 'watch:compass');  
 };  

Both plugins for Grunt "grunt-compass" and "grunt-contrib-watch" are really powerful and flexible. You'll notice that you can configure your project's deployment in many ways. What's more you'll be able to set up your grunt configuration with such plugin as "Live reload", which will basically reload the page in your browser. 

For more blog posts go to http://ds-web-dev.com/blog.

Reference:

• https://github.com/gruntjs/grunt-contrib-sass
• http://www.codebelt.com/javascript/compile-sass-files-into-one-css-file-grunt-js-tutorial/