开发模式下使用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']);
}