2014-02-24 81 views
4

當我運行'grunt server'時,一切都會執行,包括編譯我的Sass。我應該如何繼續觀察Sass更改並執行指南針,同時保持Express和Livereload服務器的功能?運行快速服務器時如何通過grunt watch執行指南針?

當我更改文件時,包括livereload在內的一切工作,唯一沒有執行指南針的重新編譯是因爲我更改了Sass文件。它甚至檢測到變化,但不運行它。

我已經附加了gruntfile的相關部分,只是爲了儘可能縮短它。

'use strict'; 
var LIVERELOAD_PORT = 35729; 
var path = require('path'); 

module.exports = function (grunt) { 
    require('load-grunt-tasks')(grunt); 
    require('time-grunt')(grunt); 

    var yeomanConfig = { 
    app: 'app', 
    dist: 'dist' 
    }; 

    try { 
    yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app; 
    } catch (e) {} 

    grunt.initConfig({ 
    yeoman: yeomanConfig, 
    watch: { 
     gruntfile: { 
     files: ['Gruntfile.js'] 
     }, 
     compass: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass:server', 'autoprefixer'] 
     }, 
     livereload: { 
     options: { 
      livereload: LIVERELOAD_PORT 
     }, 
     files: [ 
      '<%= yeoman.app %>/{,*/}*.html', 
      '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', 
      '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
     } 
    }, 
    express: { 
     options: { 
     port: 3000, 
     hostname: '*' 
     }, 
     livereload: { 
     options: { 
      livereload: true, 
      serverreload: false, 
      server: path.resolve('app.js'), 
      bases: [path.resolve('./.tmp'), path.resolve(__dirname, yeomanConfig.app)], 
      files: [ 
      '<%= yeoman.app %>/{,*/}*.html', 
      '.tmp/styles/{,*/}*.css', 
      // '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}' 
      ] 
     } 
     }, 
     test: { 
     options: { 
      server: path.resolve('app.js'), 
      bases: [path.resolve('./.tmp'), path.resolve(__dirname, 'test')] 
     } 
     }, 
     dist: { 
     options: { 
      server: path.resolve('app.js'), 
      bases: path.resolve(__dirname, yeomanConfig.dist) 
     } 
     } 
    }, 
    open: { 
     server: { 
     url: 'http://localhost:<%= express.options.port %>' 
     } 
    }, 

    compass: { 
     options: { 
     sassDir: '<%= yeoman.app %>/styles', 
     cssDir: '.tmp/styles' 
     }, 
     dist: { 
     options: { 
     } 
     }, 
     server: { 
     options: { 
      debugInfo: true 
     } 
     } 
    }, 

    autoprefixer: { 
     options: { 
     browsers: ['last 1 version'] 
     }, 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
     }] 
     } 
    }, 

    concurrent: { 
     server: [ 
     'compass:server', 
     'copy:styles' 
     ], 
     test: [ 
     'copy:styles' 
     ], 
     dist: [ 
     'compass', 
     'copy:styles', 
     'imagemin', 
     'svgmin' 
     ] 
    } 
    }); 

    grunt.registerTask('server', function (target) { 
    if (target === 'dist') { 
     return grunt.task.run(['build', 'open', 'express:dist', 'express-keepalive']); 
    } 

    grunt.task.run([ 
     'clean:server', 
     'concurrent:server', 
     'autoprefixer', 
     'express:livereload', 
     'open', 
     'watch' 
    ]); 
    }); 

    grunt.registerTask('test', [ 
    'clean:server', 
    'autoprefixer', 
    'concurrent:test', 
    'express:test', 
    'karma' 
    ]); 

    grunt.registerTask('build', [ 
    'clean:dist', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'cssmin', 
    'uglify', 
    'copy:dist', 
    'modernizr', 
    'rev', 
    'usemin', 
    'cdnify', 
    'ngmin' 
    ]); 

    grunt.registerTask('default', [ 
    'newer:jshint', 
    'compass', 
    'test', 
    'build' 
    ]); 
}; 

回答

0

如果您使用的是grunt-contrib-compass,我建議您使用原生羅盤觀察器。它的工作速度比用grunt重建要快得多。如果啓用它,您必須通過grunt-concurrent運行它,更多信息here