通过 Grunt Node.js 使用 SASS 预处理器

Working SASS preprocessor by Node.js through Grunt

我有 D:/projectA

Gruntfile.js

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({

    //Read the package.json (optional)
    pkg: grunt.file.readJSON('package.json'),

    // Metadata.
    meta: {
        basePath: '../',
        srcPath: '../',
        deployPath: '../'
    },

    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
            '* Copyright (c) <%= grunt.template.today("yyyy") %> ',

    // Task configuration.
    concat: {
        options: {
            stripBanners: true
        },
        dist: {
            src: ['<%= meta.srcPath %>engine/css/mycss1.css', '<%= meta.srcPath %>engine/css/mycss2.css'],
            dest: '<%= meta.deployPath %>engine/css/00myfinal.css'
        }
    },

    //the Sass Task 
    sass: {
        sass_my_files : {

            files : {
                //"the Destination " : " the source files"
                "../engine/css/mystyle3.css" : "../engine/css/mysass1.scss",
            },
            options : {
                "style":"compressed",
                "precision":"7"
            },
        },
    },

});

// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');

// Default task
grunt.registerTask('default', ['concat','sass']);

};

package.json

{
  "name": "Test-Project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.1.3"
  }
}

Ruby 安装在我的 'Windows'.

正在插入以下命令:

npm install ruby-sass

我搞定了一切。但是在 运行 'Grunt' 命令上,我得到错误:

You need to have Ruby and Sass installed and in your path for this task to work.

有人能告诉我为什么我的控制台在成功运行“concat”任务后显示错误,并在“ SASS'任务?

使用 npm install -g ruby-sass,它会在您的环境变量中全局安装 ruby-sass gem。然后继续。

我建议使用 Gulp 而不是 Grunt。它们的功能相似,但我更喜欢 Gulp,因为它是管道资产。值得学习。