安装

安装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实时编译的更多相关文章

  1. gulp.js实现less批量实时编译

    问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...

  2. Idea 实时编译 和 热部署

    实时编译 idea自动保存编写好的文件,但是不会编译,想要编译需要按ctrl+F9(编译整个项目)ctrl+shift+f9(单个文件),不仅麻烦而且和平常习惯也不相复合.怎么令idea的ctrl+s ...

  3. gulp实时编译less,压缩合并requirejs模块文件

    gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...

  4. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  5. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  6. 使用caddy 进行nodejs web应用近实时编译更新

    caddy 相比nginx 是一个不错的轻量代理服务器,支持的功能也是比较多的, 同时插件也挺多 demo 测试的是通过git 插件进行一个使用spec-md 编写的文档近实时编译以及预览 项目使用d ...

  7. Webstorm实时编译SASS和LESS

    Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右 ...

  8. 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...

  9. idea实时编译代码

    实时编译就不解释了,出现错误的代码在命令行能给你提示出来.看图操作吧:

随机推荐

  1. paper 100:何恺明经典去雾算法

    一:由简至美的最佳论文(作者:何恺明  视觉计算组) [视觉机器人:个人感觉学习他的经典算法固然很重要,但是他的解决问题的思路也是非常值得我们学习的] 那是2009年4月24日的早上,我收到了一封不同 ...

  2. 我去,徒弟半夜来电让写一个PHP短信验证(和群发)

    感觉很纳闷啊,,..好几天几乎通宵了,今晚本来以为有个早觉睡,居然2点多才打电话来让帮忙... 记得前段时间还有博友问过同类的问题.... 名字我就隐藏掉了,呵呵,, 我在网上随便找了一个提供相应接口 ...

  3. CNN & RNN 及一些常识知识(不断扩充中)

    参考: http://blog.csdn.net/iamrichardwhite/article/details/51089199 一.神经网络的发展历史 五六十年代,提出感知机 八十年代,提出多层感 ...

  4. notepad++代码自动补全功能

    可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了

  5. [转]SOCKET通信中TCP、UDP数据包大小的确定

    TCP.UDP数据包大小的确定 UDP和TCP协议利用端口号实现多项应用同时发送和接收数据.数据通过源端口发送出去,通过目标端口接收.有的网络应用只能使用预留或注册的静态端口:而另外一些网络应用则可以 ...

  6. (3) 深入理解Java Class文件格式(二)

    好文转载:http://blog.csdn.net/zhangjg_blog/article/details/21487287 在上一篇文章 深入理解Java Class文件格式(一) 中, 介绍了c ...

  7. 【UML】如何记忆UML类图的画法

    前言 UML类图形象反映系统类之间的关系,大家非常常用.小弟不才,偶尔使用,往往每次使用都得查询各种关系的表示方式.终于,这次认真看了几遍,打算记起来. 注意 记忆方法只是本人联想,用于加强记忆.与该 ...

  8. UVA10561 Treblecross 组合游戏/SG定理

    Treblecross is a two player gamewhere the goal is to get three X in a row on a one-dimensional board ...

  9. Bootstrap_响应式网格系统

    首先添加CSS样式: [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } [class *= col-] [class ...

  10. 【leetcode❤python】 190. Reverse Bits

    #-*- coding: UTF-8 -*- class Solution:    # @param n, an integer    # @return an integer    def reve ...