Grunt:文件更改后将sass转换为css(观看)

时间:2015-08-10 14:38:01

标签: gruntjs grunt-contrib-watch grunt-contrib-sass

所以这是我的gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    folders: {
       'dist': 'dist',
       'app': 'app'
    },

// configure jshint to validate js files -----------------------------------
jshint: {
  options: {
    reporter: require('jshint-stylish'),
    ignores: [
    'Grunfile.js',
    'app/assets/lib/**/*'
    ]
  },
  all: [
  'app/**/**/*.js',
  ]
},

// configure uglify to minify js files -------------------------------------
uglify: {
  options: {
    banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
  },
  build: {
    files: {
      'dist/js/app.min.js': 'app/js/main.js'
    }
  }
},

// compile sass stylesheets to css -----------------------------------------
sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'app/assets/css/main.css': 'app/assets/sass/main.sass',
      'app/assets/css/variables.css': 'app/assets/sass/variables.sass',
      'app/assets/css/typography.css': 'app/assets/sass/typography.sass',
      'app/assets/css/reset.css': 'app/assets/sass/reset.sass'
    }
  }
},

// starting an express server ----------------------------------------------
express: {
  dev: {
    options: {
      port: 9000,
      hostname: '0.0.0.0',
      bases: ['app'],
      livereload: true
    }
  }
},

// configure watch to auto update ------------------------------------------
watch: {
  sass: {
    files: ['**/*.{scss,sass}'],
    tasks: ['sass'],
    options: {
      livereload: true
    }
  },
  reload: {
    options: {
      livereload: true
    },
    files: ['app/**/*'],
  },
}

  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-express');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint', 'uglify', 'sass', 'express', 'watch:reload']);

};

我的问题: 当我开始咕噜声时,它检查我的sass文件并自动将其转换为css文件。校验。但是,如果我开始咕噜声,然后编辑一个sass文件,它会识别更改,但不会再次将sass转换为css。 有人看到了这个错误吗?

干杯!

1 个答案:

答案 0 :(得分:0)

发现“问题”:必须注册任务'观察'而不是'观看:重新加载'

干杯