[Sass]自動化編譯

喜歡自動化研究的同學，應該都知道Grunt和Gulp這兩個東東。如果您正在使用其中的任何一種，那麼你也可以通過他們來配置Sass的編譯。這裡僅列出兩個示例代碼（具體情況要根據您的項目環境來做一定的修改，不建議生搬硬套，容易發生命案，呵呵。

1、Grunt配置Sass編譯的示例代碼

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },

        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

想了解Grunt同學請單擊這裡學習《Grunt-beginner前端自動化工具》。

2、Gulp配置Sass編譯的示例代碼

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);