Grunt配置sass自动编译

作者:赵金添 分类: 前端 发布于:2014-9-23 17:34 ė1551次浏览 60条评论
参考:http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html



1. 安装ruby
http://rubyinstaller.org/downloads/
安装时,勾选“Add Ruby executables to your PATH”


2. 安装sass
gem install sass


3. package.json
{
    "name": "ProjectA",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-concat": "~0.5.0",
        "grunt-contrib-uglify": "~0.5.0",
        "grunt-contrib-cssmin": "~0.10.0",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-sass": "~0.8.1"
    }
}


4. Gruntfile.js
module.exports = function (grunt) {
    // 初始化Grunt任务
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),

        // sass
        sass: {
            dist: {
                dist: {
                    style: 'expanded'
                },
                files: {
                    './assets/css/1.css': './assets/scss/1.scss'
                }
            }
        },

        // 监听
        watch: {
            scripts: {
                files: [
                    './assets/scss/**/*.scss'
                ],
                tasks: ['sass']
            }
        }
    });

    // 加载package.json中用到的插件
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks('grunt-contrib-sass');

    // 注册一个任务,第二参数可以是数组或者字符串,默认会执行default任务
    grunt.registerTask("default", ["sass"]);
};


本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部