Example Gruntfile.js
module.exports = function(grunt) {
'use strict'
var processdate = (new Date).toString();
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Watch objects
//----------------------------------
watch: {
scripts: {
files: ['scss/**/*.scss'],
tasks: ['sass','autoprefixer','cssmin'],
options: {
interval: 500,
spawn: false
}
}
},
sass: {
options: {
includePaths: require('node-bourbon').includePaths,
outputStyle: 'nested', // Values: 'nested', 'compressed'
precision: 3,
sourceMap: true, // Without this being true the resulting map file isn't linked at the bottom of the generated .css file
sourceMapEmbed: false,
sourceComments: false
},
dist: {
files: {
'global.css': ['scss/master.scss']
}
}
},
//Plugins
//----------------------------------
autoprefixer: {
options: {
browsers: ['last 2 versions'],
cascade: false,
map: {
prev: false,
inline: false,
annotation: false,
sourcesContent: false
}
},
multiple_files: {
src: 'global.css',
dest: 'global.css'
}
},
cssmin: {
add_banner: {
options: {
banner: '/* Author: **Your Name\n * Created: 2016-02-16\n * Last Updated: '+processdate+'\n */'
},
files: {
'global.min.css': ['global.css']
}
}
}
});
//Load NPM Tasks
//----------------------------------
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-sass');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.loadNpmTasks ('grunt-contrib-cssmin');
grunt.registerTask('default', ['sass','autoprefixer','cssmin']);
grunt.registerTask('c', ['sass']); // c=compile
grunt.registerTask('w', ['watch']);
};
module.exports = function(grunt) {
'use strict'
var processdate = (new Date).toString();
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Watch objects
//----------------------------------
watch: {
scripts: {
files: ['scss/**/*.scss'],
tasks: ['sass','autoprefixer','cssmin'],
options: {
interval: 500,
spawn: false
}
}
},
sass: {
options: {
includePaths: require('node-bourbon').includePaths,
outputStyle: 'nested', // Values: 'nested', 'compressed'
precision: 3,
sourceMap: true, // Without this being true the resulting map file isn't linked at the bottom of the generated .css file
sourceMapEmbed: false,
sourceComments: false
},
dist: {
files: {
'global.css': ['scss/master.scss']
}
}
},
//Plugins
//----------------------------------
autoprefixer: {
options: {
browsers: ['last 2 versions'],
cascade: false,
map: {
prev: false,
inline: false,
annotation: false,
sourcesContent: false
}
},
multiple_files: {
src: 'global.css',
dest: 'global.css'
}
},
cssmin: {
add_banner: {
options: {
banner: '/* Author: **Your Name\n * Created: 2016-02-16\n * Last Updated: '+processdate+'\n */'
},
files: {
'global.min.css': ['global.css']
}
}
}
});
//Load NPM Tasks
//----------------------------------
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-sass');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.loadNpmTasks ('grunt-contrib-cssmin');
grunt.registerTask('default', ['sass','autoprefixer','cssmin']);
grunt.registerTask('c', ['sass']); // c=compile
grunt.registerTask('w', ['watch']);
};
Example package.json:
{
"name": "grunt",
"version": "0.1.1",
"private": true,
"devDependencies": {
"grunt": "latest",
"grunt-autoprefixer": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-watch": "latest",
"grunt-sass": "latest",
"node-bourbon": "latest"
}
}
Example master.scss:
// Manually list all files to be included in specific order, skip .scss extensions
@import "./fonts";
@import "./variables";
@import "./base";
@import "./layout";
@import "./partials";
@import "./global";
$ npm install
$ grunt
$ grunt w
That's it.