Grunt完成對LESS實時編譯


安裝

安裝grunt需要先安裝node.js

之后需要借助npm來安裝grunt-cli,在cmd中npm install -g grunt-cli。(測試grunt --version看是否正確顯示grunt-cli版本)

這樣,就完成了grunt的安裝。

在項目中使用

首先創建一個項目目錄,由於grunt是node環境下運行,需要使用npm進行管理。所以項目必須要有一個package.json文件,里面最重要的是寫明白devDependencies依賴關系。這里有一個例子(用於編譯less)可以使用:

?
 
{
   "name" : "ProjectName" ,
   "version" : "0.1.0" ,
   "devDependencies" : {
     "grunt" : "*" ,
     "grunt-contrib-less" : "*" ,
     "grunt-contrib-watch" : "*"
   }
}

  

有了package.json文件之后,我們就可以使用npm install來建立項目了。但是此時,還不能使用grunt命令,因為還差一個Gruntfile.js或者Gruntfile.coffee的文件。這個文件作用是grunt如何工作。繼續那個例子(編譯less)的Gruntfile.js如下:

?
 
module.exports = function (grunt) {
 
grunt.initConfig({
     less: {
         compile: {
             files: {
                 'css/test.css' : 'css/test.less'
             }
         },
         yuicompress: {
             files: {
                 'css/test-min.css' : 'css/test.css'
             },
             options: {
                 yuicompress: true
             }
         }
     },
     watch: {
         scripts: {
             files: [ 'css/*.less' ],
             tasks: [ 'less' ]
         }
     }
});
 
grunt.loadNpmTasks( 'grunt-contrib-less' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
 
grunt.registerTask( 'default' , [ 'less' , 'watch' ]);
};

  

這樣,在項目路徑下,cmd中執行grunt來完成對css路徑下less文件的實時編譯了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM