基金会scss指南针,gruntjs和凉亭安装

时间:2014-03-17 14:21:11

标签: css sass gruntjs zurb-foundation compass-sass

scss: compass, gruntjs and bower install foundation - import path

可能加倍

所以我有:

-models
-public
    ─bower_components
     ├───fastclick
     │   └───lib
     ├───foundation
     │   ├───css
     │   ├───js
     │   │   ├───foundation
     │   │   └───vendor
     │   └───scss
     │       └───foundation
     │           └───components

Gruntfile.js
package.json

我的gruntfile.js

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
      compass: {                  // Task
        dist: {                   // Target
          options: {              // Target options
            sassDir: 'public/scss',
            cssDir: 'public/stylesheets',
            environment: 'production',
            require: 'zurb-foundation',
            importPath: 'public/bower_components/foundation/scss',
            cacheDir: 'public/.sass_cache',
          }
        }
      },

      watch: {
        css: {
            files: ['public/scss/_settings.scss'],
            tasks: ['compass:dist'],
            option: { 
                spawn: false, 
                livereload: true
            }
        }
      }
    });

}

当我使用命令时:grunt compass

Running "compass:dist" (compass) task
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

Done, without errors.

它不起作用...指南针不编译我的scss ...我怎么能纠正它?

2 个答案:

答案 0 :(得分:1)

我相信你必须注册你的任务。像这样:

module.exports = function(grunt) {

  // Configuration goes here
  grunt.initConfig({                  
    // blah
  });  

  // Define your tasks here
  grunt.registerTask('default', ['compass', 'watch']);
  grunt.registerTask('justCompass', ['compass']);
};

现在只需拨打grunt即可同时运行罗盘并观看,或grunt justCompass仅运行罗盘任务。

答案 1 :(得分:1)

除了注册任务外,还需要阅读package.json文件。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
    // all the other code
  });
};