2015-07-11 73 views
1

我使用node.js,grunt和RECESS将* .css文件编译为* .css文件。
这是我Gruntfile.js文件RECESS更改属性的顺序

module.exports = function(grunt) { 

grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 

    recess: { 
     dist: { 
      options: { 
       compile: true 
      }, 
      files: { 
       'css/style.css': 'less/style.less' 
      } 
     } 
    }, 
    watch: { 
     recess: { 
      files: ['less/*.less'], 
      tasks: ['recess'], 
      options: { 
       spawn: false, 
      }, 
     } 
    } 
}); 

grunt.loadNpmTasks('grunt-recess'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 

grunt.registerTask('default', ['recess', 'watch']); 

}; 

,但现在我需要更改属性命令输出* .css文件像

.class { 
    margin: 0; 
    padding: 0; 

    width: auto; 
    min-width: 0; 
    max-width: 0; 
    height: auto; 
    min-height: 0; 
    max-height: 0; 

    display: block; 
    visibility: hidden; 
    overflow: hidden; 
    float: none; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 

    text-align: left; 
    text-decoration: none; 
    text-indent: 1; 
    text-transform: uppercase; 
    letter-spacing: 1; 
    vertical-align: top; 
    line-height: 1; 
    white-space: normal; 
    word-spacing: normal; 

    font: 1em sans-serif; 
    font-family: Arial, sans-serif; 
    font-size: 1em; 
    font-weight: normal; 
    font-style: normal; 
    font-variant: normal; 

    opacity: 1; 
    color: red; 
    border: 1px solid red; 
    background: #fff url(../i/bg.png) no-repeat 0 0; 

    z-index: 0 
    cursor: default; 

}

我发现了strict-property-order.jshttps://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L36我想它可以帮助我,但我不知道如何使用它?

+0

休会的一点是,它是一种定制你的css属性的独特方式。如果你想要让你选择一个订单的咕噜任务,那里有很多东西(CSS梳子等)。然而,如果你想改变顺序,你应该可以重新排序strict-property-order.js中的'order'数组 – bert

回答

1

要更改希望输出属性的顺序,请编辑strict-property-order.js中的order数组。

例如:

order = [ 'position' , 'top' , 'right' , 'bottom' , 'left' ]

可改为:

order = [ 'position' , 'right' , 'top' , 'bottom' , 'left' ]

但是,为什么没有一个简单的config.json的原因,或类似的东西,你可以放入项目的根目录并编辑而不必与节点模块混淆,因为休会是按照属性排序的方式进行的。

如果你想要更多的自由,那里还有其他的选择(比如各种.less linters和像css-comb这样可以在编译后运行的东西)。