Skip to content

Instantly share code, notes, and snippets.

@xavez
Last active August 2, 2016 05:20
Show Gist options
  • Save xavez/6311374 to your computer and use it in GitHub Desktop.
Save xavez/6311374 to your computer and use it in GitHub Desktop.
Grunt: Compass, Autoprefixer, CSS/JS minification and Livereload. Use the `npm install`and `grunt` commands consecutively to execute.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
// Reference package.json
pkg: grunt.file.readJSON('package.json'),
// Compass
compass: {
dist: {
options: {config: 'config.rb'},
},
},
// Auto Prefixer
autoprefixer: {
dist: {
options: {
browsers: ['last 1 version', '> 1%', 'ie 8']
},
files: {
'css/style-prefixed.css': ['css/style.css']
}
}
},
// Minify CSS
cssmin: {
combine: {
files: {
'css/style-min.css': ['css/style-prefixed.css']
},
},
},
// Minify JS
uglify: {
my_target: {
files: {
'js/scripts-min.js': ['js/src/theme.js']
},
},
},
// Watch
watch: {
compass: {
files: 'scss/**/*.scss',
tasks: ['compass'],
},
csspostprocess: {
files: 'css/style.css',
tasks: ['autoprefixer', 'cssmin'],
},
jsminify: {
files: 'js/src/*.js',
tasks: ['uglify'],
},
livereload: {
options: {livereload: true},
files: ['css/*.css', 'js/*.js', '*.html', 'img/*'],
},
},
});
grunt.registerTask('default', ['watch']);
};
{
"name": "projectname",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-compass": "~0.5.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-contrib-cssmin": "~0.6.1",
"grunt-autoprefixer": "~0.2.20130806",
"grunt-contrib-uglify": "~0.2.2"
}
}
@numediaweb
Copy link

Where's the csspostprocess task :)

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