Live Edit / File Watchers with Libsass?

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,

2 comments
Comment actions Permalink

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!
0
Comment actions Permalink

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']);
};

0

Please sign in to leave a comment.