Grunt完成对LESS实时编译
2024-10-12 02:54:18
安装
安装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文件的实时编译了。
最新文章
- swift动画小试牛刀
- weblogic启动受管服务器报错Authentication for user weblogic denied (weblogic 11g 域账号密码不生效的解决方法)
- Python图片处理
- js中array的join和concat的区别
- 【转】超实用的JavaScript技巧及最佳实践
- [转]15 个顶级 HTML5 游戏引擎
- file_put_contents() failed to open stream: Permission denied 问题解决
- 系统数据文件和信息之附加组ID
- 【动态规划】POJ 1161 &; ZOJ1463 &; XMU 1033 Brackets sequence
- 查询死锁和处理死锁(SqlServer)
- freemarker错误七
- 简单的方法来改善手机3G上网速度(2G转3G)
- Android项目中打jar包 和 使用
- 第三章:初识Jquery
- js中的面向对象入门
- 深入 HTML5 Web Worker 应用实践:多线程编程
- Shell语言
- python基础之常用关键字总结
- 函数式编程之-F#类型系统
- Redis五大数据类型以及操作
热门文章
- 配置Hibernate二级缓存
- Bug测试报告--在线考试系统--金州勇士
- 配置文件之SharedPreferences
- :enabled 匹配所有可用元素
- js中cookie的使用
- 图论$\cdot$强连通分量
- 四大开源协议比较:BSD、Apache、GPL、LGPL (转)
- tomcat证书配置(来源于http://my.oschina.net/zhxm/blog/161159)
- EasyUI关于 numberbox,combobox,validatebox 的几个小问题
- 【Unity3D游戏开发】之游戏目录结构之最佳实践和优化 (十一)