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文件的实时编译了。
Grunt完成对LESS实时编译的更多相关文章
- gulp.js实现less批量实时编译
问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...
- Idea 实时编译 和 热部署
实时编译 idea自动保存编写好的文件,但是不会编译,想要编译需要按ctrl+F9(编译整个项目)ctrl+shift+f9(单个文件),不仅麻烦而且和平常习惯也不相复合.怎么令idea的ctrl+s ...
- gulp实时编译less,压缩合并requirejs模块文件
gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...
- Nodejs+Grunt配置SASS项目自动编译
Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- 使用caddy 进行nodejs web应用近实时编译更新
caddy 相比nginx 是一个不错的轻量代理服务器,支持的功能也是比较多的, 同时插件也挺多 demo 测试的是通过git 插件进行一个使用spec-md 编写的文档近实时编译以及预览 项目使用d ...
- Webstorm实时编译SASS和LESS
Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右 ...
- 前端自动化之sass实时编译及自动刷新浏览器
gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...
- idea实时编译代码
实时编译就不解释了,出现错误的代码在命令行能给你提示出来.看图操作吧:
随机推荐
- paper 100:何恺明经典去雾算法
一:由简至美的最佳论文(作者:何恺明 视觉计算组) [视觉机器人:个人感觉学习他的经典算法固然很重要,但是他的解决问题的思路也是非常值得我们学习的] 那是2009年4月24日的早上,我收到了一封不同 ...
- 我去,徒弟半夜来电让写一个PHP短信验证(和群发)
感觉很纳闷啊,,..好几天几乎通宵了,今晚本来以为有个早觉睡,居然2点多才打电话来让帮忙... 记得前段时间还有博友问过同类的问题.... 名字我就隐藏掉了,呵呵,, 我在网上随便找了一个提供相应接口 ...
- CNN & RNN 及一些常识知识(不断扩充中)
参考: http://blog.csdn.net/iamrichardwhite/article/details/51089199 一.神经网络的发展历史 五六十年代,提出感知机 八十年代,提出多层感 ...
- notepad++代码自动补全功能
可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了
- [转]SOCKET通信中TCP、UDP数据包大小的确定
TCP.UDP数据包大小的确定 UDP和TCP协议利用端口号实现多项应用同时发送和接收数据.数据通过源端口发送出去,通过目标端口接收.有的网络应用只能使用预留或注册的静态端口:而另外一些网络应用则可以 ...
- (3) 深入理解Java Class文件格式(二)
好文转载:http://blog.csdn.net/zhangjg_blog/article/details/21487287 在上一篇文章 深入理解Java Class文件格式(一) 中, 介绍了c ...
- 【UML】如何记忆UML类图的画法
前言 UML类图形象反映系统类之间的关系,大家非常常用.小弟不才,偶尔使用,往往每次使用都得查询各种关系的表示方式.终于,这次认真看了几遍,打算记起来. 注意 记忆方法只是本人联想,用于加强记忆.与该 ...
- UVA10561 Treblecross 组合游戏/SG定理
Treblecross is a two player gamewhere the goal is to get three X in a row on a one-dimensional board ...
- Bootstrap_响应式网格系统
首先添加CSS样式: [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } [class *= col-] [class ...
- 【leetcode❤python】 190. Reverse Bits
#-*- coding: UTF-8 -*- class Solution: # @param n, an integer # @return an integer def reve ...