Last active
September 23, 2015 08:05
-
-
Save alexisg/74f6cbb23fabde96eccf to your computer and use it in GitHub Desktop.
Webhook.com libsass, autoprefix with css livereload flow.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This setup will compile sass, run autoprefixer and then launch webhook's default grunt tasks. | |
// I also uses webhook's build-static task so that it only builds the css and | |
// allows livereload to refresh the css alone instead of refreshing the entire page. | |
'use strict'; | |
module.exports = function(grunt) { | |
grunt.initConfig({ | |
pkg: grunt.file.readJSON('package.json'), | |
watch: { | |
sass: { | |
files: ['sass/**/*.{scss,sass}'], | |
// Run sass, then autoprefixer, then webhooks build-static to build just the static files and have instantaneous live reload on css changes | |
tasks: ['sass', 'autoprefixer', 'build-static'] | |
} | |
}, | |
sass: { | |
options: {}, | |
dist: { | |
files: { | |
'static/css/style.css': 'sass/style.sass' | |
} | |
} | |
}, | |
autoprefixer: { | |
options: { | |
browsers: ['last 2 versions', 'ie 9'], | |
map: true | |
}, | |
dist: { | |
src: 'static/css/style.css', | |
dest: 'static/css/style-prefix.css' | |
} | |
} | |
}); | |
// If you start using advanced map functions you may need to switch to using contrib--sass | |
// instead of grunt-sass which currently uses an older but way faster libsass | |
// grunt.loadNpmTasks('grunt-contrib-sass'); | |
grunt.loadNpmTasks('grunt-sass'); | |
grunt.loadNpmTasks('grunt-autoprefixer'); | |
// In a normal setupt you would use the register task like this in grunt | |
// Since we are using webhooks internal simple watch we are going to expand on that below | |
// grunt.registerTask('default', ['sass', 'autoprefixer', 'simple-watch']); | |
// NEVER REMOVE THESE LINES, OR ELSE YOUR PROJECT MAY NOT WORK | |
require('./options/generatorOptions.js')(grunt); | |
grunt.loadTasks('tasks'); | |
// Rename webhook's default task to wh-default so we can compile our own css first and then launch wh-default | |
grunt.renameTask('default', 'wh-default'); | |
grunt.registerTask('default', ['sass', 'autoprefixer', 'wh-default']); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment