Live Edit / File Watchers with Libsass? Follow
Does anyone have any experience using Live Edit / File Watches with Libsass on Windows that could point me in a direction to get things setup?
I've seen a few referenceses to grunt sass, but none in relation to PHPStorm
Thanks,
Please sign in to leave a comment.
Hi Christian.
I only can give you hints for MacOSX with phpStorm, but maybe it will lead you in the right direction.
When I started to work with SASS in phpStorm, I installed that common ruby sass module and set up a file watcher which recognized file changes in sass files and did a compilation of the sass files to one big css file.
The problem was, that when my project became longer, it lasted about 10 to 12 seconds for a compile, which was too slow.
Then I heard about a grunt/sass configuration, which uses a port of ruby-sass to a sass coded in c.
So I did the following steps:
I installed nodeJS on my local development mac. (because a mac uses linux, it is a one line command).
Afterwards I installed grunt.
You can activate a grunt-plugin in phpStorm, then you get a grunt control window.
Then I put gruntfile.js in my root phpStorm project directory:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
sass : {
dist: {
files: {
'html/site/styles/css/application.css': 'html/site/styles/scss/application.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
Here is a GIST-Link to that file: gruntfile.js
Please look at the two lines of pink code: You have to install this two grunt plugins (grunt-sass and grunt-contrib-watch) in phpStorm (Preferences -> Node.js -> PLUS-Sign to add a plugin).
Then you are done. When you select the gruntfile.js and select the grunt-control-window, you can activate "watch", and your SASS-files are compiled with lightning speed. The speed in my project was increased so much; the compilation that lasted 10 to 12 seconds before last < 1 second!
Have fun!
Hi, many thanks for this.
I followed this through on a Windows 7 machine -- works well there too.
If you want to watch directories and define the output style, try the following:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
sass : {
dist: {
options: {
outputStyle: 'expanded' // specify style here
},
files: [{
expand: true, // allows you to specify directory instead of indiv. files
cwd: 'themes/foundation5/scss', // current working directory
src: ['**/*.scss'],
dest: 'themes/foundation5/css',
ext: '.css'
}]
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};