Less 編譯生成 css

 

開發模式下使用less.js
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
服務器端 運行時使用less.js
sudo apt-get install nodejs-legacy nodejs
sudo apt-get install npm
sudo apt-get install node-less
lessc test.less test.css

 

npm install -g grunt-cli
生成 package.json 文件
這個 package.json 文件其實是 Node.js 來描述一個項目的文件，JSON 格式。生成這個文件超級簡單，推薦用命令行交互式的生成一下：
打開命令行，cd gruntxx 文件夾下面，輸入指令 npm init 之后，就出來很多信息，然后開始填寫項目名稱，填寫好了之后回車即可。其實這里你一路回車下去也無妨，但是建議你細細的填一下，不明白的跳過好了
{
  "name": "'pansq'",
  "version": "1.0.1",
  "description": "learn grunt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

安裝 Grunt 和所需要的插件
npm install grunt --save-dev
cssmin:grunt-contrib-cssmin
less:grunt-contrib-less
合並文件：grunt-contrib-concat
語法檢查：grunt-contrib-jshint
Scss 編譯：grunt-contrib-sass
壓縮文件：grunt-contrib-uglify
監聽文件變動：grunt-contrib-watch
建立本地服務器：grunt-contrib-connect

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less:{
            less2css : {
                options: {
                    compress: false
                },
                files: {
                    '../css/global.css': '../less/global.less'
                }
            }
        },
        cssmin:{
            target:{
                options:{
                    sourceMap:false,
                    beautify: {
                        //中文ascii化，非常有用！防止中文亂碼的神配置
                        ascii_only: true
                    }
                },
                files:{
                    '../css/global.min.css':'../css/global.css'
                }
            }
        },
        uglify:{
            build:{
                options:{
                    banner:'\n'
                },
                files:{
                    '../js/test.min.js':'../js/test.js'
                }
            }
        }
    })
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default',['less','cssmin','uglify']);
}