Skip to content

Instantly share code, notes, and snippets.

@kellishaver
Last active August 29, 2015 14:06
Show Gist options
  • Save kellishaver/cb218a6e99418c12e738 to your computer and use it in GitHub Desktop.
Save kellishaver/cb218a6e99418c12e738 to your computer and use it in GitHub Desktop.
Automated init and build scripts for client-side projects
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.
alias client-side-init='ruby ~/boilerplates/client-side-init.rb $1'
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"`
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']
{
"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"
}
}
@kellishaver
Copy link
Author

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

@jonathanstark
Copy link

Niiice!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment