- Begin by using HTML5 Boilerplate as a starter project template,
- download the template locall
- add bash alias to copy that folder when starting a new project
- e.g. $> 'html5-new PROJECTNAME' will create a folder named PROJECTNAME and will copy the contents of html5boilerplate into PROJECTNAME
- Then add the Frontend Toolchain using NPM and Grunt. Assuming NPM and grunt-cli preinstalled on system. If not, install them with:
Set up a package.json in your project ... This command will set one up after asking/prompting on several questions about the project
$> npm init
Setting up grunt-init:
$> npm install -g grunt-init
Copy the grunt-init-gruntfile template to ~/.grunt-init folder to add a grunt-init template for future use
$> mkdir ~/.grunt-init && cd $_
$> git clone https://github.com/gruntjs/grunt-init-gruntfile.git
Add eslint to toolchain Install eslint:
$> npm install -g eslint
If it's your first time using ESLint, you should set up a config file using --init:
$> eslint --init
Install the grunt-eslint hook, and save it to the packgage.json:
$> npm install eslint-grunt --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('eslint-grunt');
ES-Lint Simplest configuration. Lint all of the JavaScript files in the project:
module.exports = function (grunt) {
grunt.config.init({
eslint: {
all: ['**/*.js'],
options: {
config: "path/to/rules.json"
}
});
grunt.loadNpmTasks('eslint-grunt');
};
Install plugin
npm install grunt-jscs --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks("grunt-jscs");
#####Options Any specified option will be passed through directly to JSCS, plus this plugin has additional options:
#####config Defines how to externally load a JSCS configuration via the JSCS config loader. The following is the behavior of this option:
If set to a file path, then this file will be used; If set to true, JSCS will use its default config loading behavior; If set to true or to a file path with JSCS options specified in the grunt task, then they will be merged.
jscs: {
src: "path/to/files/*.js",
options: {
config: ".jscsrc",
esnext: true, // If you use ES6 http://jscs.info/overview.html#esnext
verbose: true, // If you need output with rule names http://jscs.info/overview.html#verbose
requireCurlyBraces: [ "if" ],
//fix,
//force,
//reporter
//reporterOutput
}
}
Install
npm install grunt-jsbeautifier --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks("grunt-jsbeautifier");
"jsbeautifier" : {
"default": {
src : ["src/**/*.js"]
},
"git-pre-commit": {
src : ["src/**/*.js"],
options : {
mode:"VERIFY_ONLY"
}
}
}
- files
- src
- options.mode (optional)
- options.dest (optional)
- options.config (optional)
"jsbeautifier": {
files: ["src/**/*.js"],
options: {
config: "path/to/configFile",
html: {
braceStyle: "collapse",
indentChar: " ",
indentScripts: "keep",
indentSize: 4,
maxPreserveNewlines: 10,
preserveNewlines: true,
unformatted: ["a", "sub", "sup", "b", "i", "u"],
wrapLineLength: 0
},
css: {
indentChar: " ",
indentSize: 4
},
js: {
braceStyle: "collapse",
breakChainedMethods: false,
e4x: false,
evalCode: false,
indentChar: " ",
indentLevel: 0,
indentSize: 4,
indentWithTabs: false,
jslintHappy: false,
keepArrayIndentation: false,
keepFunctionIndentation: false,
maxPreserveNewlines: 10,
preserveNewlines: true,
spaceBeforeConditional: true,
spaceInParen: false,
unescapeStrings: false,
wrapLineLength: 0,
endWithNewline: true
}
}
},
All files from foo folder except bar.js
jsbeautifier: {
files: ["foo/*.js", "!foo/bar.js"]
}
- CSSLint
- CSS reformatter - Revizor
- Unused CSS - grunt-uncss
- Unused CSS grunt-ucss
- Autoprefixer
- W3C/CSS Validation
npm install grunt-contrib-csslint --save-dev grunt.loadNpmTasks('grunt-contrib-csslint'); Run this task with the grunt csslint command.
csslint: {
options: {
csslintrc: '.csslintrc'
},
strict: {
options: {
import: 2
},
src: ['path/to/**/*.css']
},
lax: {
options: {
import: false
},
src: ['path/to/**/*.css']
}
}
Install
npm install grunt-revizor --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-revizor');
Usage - Default Options
grunt.initConfig({
revizor: {
options: {},
src: ['test/css/*.css', 'test/html/*.html', 'test/js/*.js']
},
});
Install
npm install grunt-w3c-validation --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-w3c-validation');
And add to your task list using html-validation or css-validation:
grunt.registerTask("default", ["html-validation"]);
grunt.registerTask("default", ["css-validation"]);
In your project's Gruntfile, add a section named html-validation or css-validation to the data object passed into grunt.initConfig().
html-validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror: false,
remotePath: "http://decodize.com/",
remoteFiles: ["html/moving-from-wordpress-to-octopress/",
"css/site-preloading-methods/"], //or
remoteFiles: "validation-files.json", // JSON file contains array of page paths.
relaxerror: ["Bad value X-UA-Compatible for attribute http-equiv on element meta."] //ignores these errors
},
files: {
src: ['<%= yeoman.app %>/*.html',
'!<%= yeoman.app %>/index.html',
'!<%= yeoman.app %>/modules.html',
'!<%= yeoman.app %>/404.html']
}
}
css-validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror:false,
relaxerror: [],
profile: 'css3', // possible profiles are: none, css1, css2, css21, css3, svg, svgbasic, svgtiny, mobile, atsc-tv, tv
medium: 'all', // possible media are: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv, presentation
warnings: '0' // possible warnings are: 2 (all), 1 (normal), 0 (most important), no (no warnings)
},
files: {
src: ['<%= yeoman.app %>/css/*.css']
}
}
npm install grunt-htmllint --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-htmllint');
In your project's Gruntfile, add a section named htmllint to the data object passed into grunt.initConfig().
grunt.initConfig({
htmllint: {
your_target: {
options: {
force: false,
plugins: ['htmllint-plugin-name'],
/* htmllint options go here */
},
src: [
'path/to/yo/html_files'
]
}
},
});
Installation
npm install grunt-html-validation --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-html-validation');
And add to your task list using validation:
grunt.registerTask('default', ['validation']);
In your project's Gruntfile, add a section named validation to the data object passed into grunt.initConfig().
validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror: false,
remotePath: 'http://decodize.com/',
remoteFiles: ['html/moving-from-wordpress-to-octopress/',
'css/site-preloading-methods/'], //or
remoteFiles: 'validation-files.json', // JSON file contains array of page paths.
relaxerror: ['Bad value X-UA-Compatible for attribute http-equiv on element meta.'] //ignores these errors
},
files: {
src: ['<%= yeoman.app %>/*.html',
'!<%= yeoman.app %>/index.html',
'!<%= yeoman.app %>/modules.html',
'!<%= yeoman.app %>/404.html']
}
}
npm install grunt-htmltidy --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-htmltidy');
Run this task with the grunt htmltidy command.
Example: In your project's Gruntfile, add a section named htmltidy to the data object passed into grunt.initConfig().
grunt.initConfig({
htmltidy: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Image Optimization w/ImageMagick grunt-image-resize -OR- grunt-contrib-imagemin
npm install grunt-contrib-jasmine --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-contrib-jasmine');
// Example configuration
grunt.initConfig({
jasmine: {
pivotal: {
src: 'src/**/*.js',
options: {
specs: 'spec/*Spec.js',
helpers: 'spec/*Helper.js'
}
}
}
});
- Browsersync
- Script/Link tags
- static analysis reports w/plato - plugin
- code complexity plugin
- grunt-newer
- grunt-contrib-watch
- grunt-contrib-connect
- grunt-contrib-clean
- grunt-contrib-copy
- grunt-contrib-concat
- Grunt Plugins Reviewed
- Lintspaces
- Leading indent
- Autoprefixer
- Browserify
- Bower Task
- Shell
- Exec
- Shell Spawn
- Assemble Boilerplates
- Grunticon
Install Browsersync utility first
npm install -g browser-sync
Install Browsersync plugin
npm install grunt-browser-sync --save-dev
Set up the task in Gruntfile.js
grunt.loadNpmTasks('grunt-browser-sync');
The simplest example would be watching CSS files and using the built-in server for static HTML/CSS/JS files. This config alone will launch a mini-server (using your current working directory as the base), watch your CSS files for changes & auto-inject those changes into all connected browsers.
browserSync: {
bsFiles: {
src : 'assets/css/*.css'
},
options: {
server: {
baseDir: "./"
}
}
}
Browser Sync is not a replacement for regular watch tasks (such as compiling SASS, LESS etc), they are designed to be used together. If you intend to do this, you'll need to set watchTask: true and be sure to call the watch task AFTER browserSync. For example, to compile SASS and then inject the CSS into all open browsers (without a page refresh), your config for all three tasks might look something like this:
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['sass']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'app/css/*.css',
'app/*.html'
]
},
options: {
watchTask: true,
server: './app'
}
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};