Automated init and build scripts for client-side projects

Automated Client Side Init

Sometimes you want to keep it simple and create just the basics that you need to start from a clean slate. 

I keep `Gruntfile.coffee`, the `package.json` file and the `client-side-init.rb` file in `~/builerplates`. Then I added the alias to my `bash_profile`.

To start a new project I just run:

    client-side-init my-project-name

Then I can just `cd` into `~/www/my-project-name` run `grunt` and get to work.

The init script performs the following tasks (not necessarily in this order):

* creates the new project directory
* copies over the Gruntfile and package file into the new project
* sets up the initial directories, and a couple of base coffeescript and sass files, and a blank `index.html` file
* creates `.keep` files in subfolders, so git won't ignore them if they're empty
* initializes an empty git repository
* creates a `.gitignore` to ignore `.DS_Store` files, the sass cache, and node modules directories
* creates an empty `readme.md` file with the project title
* commits everything to the new repo
* runs `npm install` to install node modules needed by Grunt

CoffeeScript and SASS files are compiled to `js/src` and `css/src` respectively, and then concatenated, and concatenated and minified into their parent `js` and `css` directories.

.bash_profile

alias client-side-init='ruby ~/boilerplates/client-side-init.rb $1'

client-side-init.rb

require "fileutils"

dest = "/Users/kelli/www/" + ARGV[0]

Dir.mkdir(dest)
Dir.mkdir(dest + "/coffee")
Dir.mkdir(dest + "/css")
Dir.mkdir(dest + "/js")
Dir.mkdir(dest + "/images")
Dir.mkdir(dest + "/sass")

FileUtils.touch(dest + "/coffee/.keep")
FileUtils.touch(dest + "/coffee/application.coffee")
FileUtils.touch(dest + "/css/.keep")
FileUtils.touch(dest + "/js/.keep")
FileUtils.touch(dest + "/images/.keep")
FileUtils.touch(dest + "/sass/.keep")
FileUtils.touch(dest + "/sass/application.scss")
FileUtils.touch(dest + "/index.html")

File.open(dest + "/.gitignore", "w") { |file| file.write(".DS_Store\n.sass-cache\nnode_modules") }
File.open(dest + "/readme.md", "w") { |file| file.write(ARGV[0].gsub("-", " ").capitalize + "\n====") }

FileUtils.cp_r("/Users/kelli/boilerplates/Gruntfile.coffee",dest)
FileUtils.cp_r("/Users/kelli/boilerplates/package.json",dest)

`cd #{dest} && npm install`
`cd #{dest} && git init`
`cd #{dest} && git add .`
`cd #{dest} && git commit -a -m "initial import"`

Gruntfile.coffee

module.exports = (grunt) ->
 
  grunt.initConfig
 
    sass:
      compile:
        options:
          style: 'expanded'
        files: [
          expand: true
          cwd: 'sass'
          src: ['**/*.scss']
          dest: 'css/src'
          ext: '.css'
        ]
 
    coffee:
      compile:
        expand: true
        cwd: 'coffee'
        src: ['**/*.coffee']
        dest: 'js/src'
        ext: '.js'
        options:
          bare: true
          preserve_dirs: true
 
    concat:
      javascript:
        src: ['js/src/**/*.js']
        dest: 'js/app.js'
      stylesheets:
        src: ['css/src/**/*.css']
        dest: 'css/app.css'

    uglify:
      dist:
        files:
          'js/app.min.js': ['js/app.js']

    cssmin: {
      combine: {
        files: {
          'css/app.min.css': ['css/app.css']
        }
      }
    }

    watch:
      html:
        files: ['**/*.html']
      sass:
        files: 'sass/**/*.scss'
        tasks: ['sass', 'concat', 'cssmin']
      coffee:
        files: 'coffee/**/*.coffee'
        tasks: ['coffee', 'concat', 'uglify']
      options:
        livereload: true
 
  grunt.loadNpmTasks 'grunt-contrib-cssmin'
  grunt.loadNpmTasks 'grunt-contrib-sass'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-concat'
  grunt.loadNpmTasks 'grunt-contrib-uglify'

  grunt.registerTask 'default', ['sass', 'coffee', 'concat', 'uglify', 'cssmin', 'watch']

    

package.json

{
    "name": "project",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-cssmin": "~0.10.0",
        "grunt-contrib-sass": "~0.8.1",
        "grunt-contrib-coffee": "~0.11.1",
        "grunt-contrib-concat": "~0.5.0",
        "grunt-contrib-uglify": "~0.5.1",
        "grunt-contrib-watch": "~0.6.1",
        "coffee-script": "~1.8.0"
    }
}


    

Sharing my setup for initializing new client-side projects - for those occasions when I'm not building a full app in Rails. :)

Niiice!!!