原文地址:

Step 1: Install Node.js

Download a Node installer and run it. Installation packages are available for Mac, Windows, Linux, and SunOS. Alternatively, you can compile and install it from source.

Step 2: Install Grunt

Install Grunt using the Node package manager: (安装在Global)

$ npm install -g grunt
$ npm install -g grunt-cli

Providing -g installs the package globally.

Providing -g installs the package globally.

Step 3: Create a Gruntfile.js

Now create a file called Gruntfile.js in your project directory.

Then copy and paste in the example configuration shown just below this paragraph. You'll just need to change the (commented) lines that define which files Grunt should keep an eye on, as well as the source and destination paths to the LESS and CSS files.

Example:

module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"css/main.css": "less/main.less"
}
}
},
watch: {
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['watch']);
};

Note that supplying /**/ in the watch path will watch files recursively under that directory.

Step 4: Configure the package file

If you do not have an existing package.json file in your project directory, create one:(创建Config file)

$ cd YOUR_PROJECT_DIRECTORY
$ npm init

When you have a valid package.json file, open it and add the following development dependencies: (设置需要哪些Dependencies)

"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-less": "~0.11.0",
"grunt-contrib-watch": "~0.6.1"
},

Then install the package dependencies:(在打Grunt的时候安装Dependencies)

$ npm install

Step 5: Start Grunt

$ grunt

While Grunt is running, it will compile your stylesheets every time you

讨论,按照如上设置后会出现一个node_modules文件夹,里面有grunt, grunt-contrib-less, grunt-contrib-watch,由于其文件path太长,导致VS deploy的时候出错,并且会在Recycle bin里创建几千个offline.html, 建议每次deploy的时候手动把node_modules移出project。

如何设置Grunt的更多相关文章

  1. grunt任务之seajs模块打包

    grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...

  2. (绝对官方好用,快速上手)针对grunt之前写的那篇有些乱,这次总结个清晰的

    安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界 ...

  3. Grunt :任务自动管理工具

    来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码 ...

  4. 转:Grunt:任务自动管理工具

    Grunt:任务自动管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:gru ...

  5. Grunt打包之seajs项目【转】

    原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...

  6. 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...

  7. Grunt:任务自动管理工具(收藏+转载)

    原文:http://javascript.ruanyifeng.com/tool/grunt.html 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:grunt-contr ...

  8. grunt简记

    grunt和gulp都是前端自动化的工具,grunt更成熟,插件社区全.大:gulp比较年轻,性能更好,更简单容易.具体使用哪种可根据实际项目组来决定. 创建任务 grunt默认执行的是default ...

  9. 现代JavaScript开发者的工具箱

    自从HTML5变得流行以来,整个Web平台取得了长足的进步,人们也开始将JavaScript视为一门能够创建复杂应用的语言.许多新的API纷纷浮现,而关于浏览器如何应用这些技术的文章也大量涌现. 作为 ...

随机推荐

  1. textile

    textile 编辑   Textile是一个人性化的Web文本生成器,以简洁的方式提供HTML标签功能. 目录 1内容 ▪ 短语修饰符 ▪ 块修饰符 ▪ 链接 ▪ 属性 ▪ 排列 ▪ 表格 ▪ 图像 ...

  2. 如何在MySql中记录SQL日志

    SQL server有一个sql profiler可以实时跟踪服务器执行的SQL语句,这在很多时候调试错误非常有用.例如:别人写的复杂代码.生产系统.无调试环境.无原代码... ...   查了一下资 ...

  3. 【Android】Handler使用入门

    本讲内容:Handler使用入门 当用户点击一个按钮时如果执行的是一个常耗时操作的话,处理不好会导致系统假死,用户体验很差,而Android则更进一步,如果任意一个Acitivity没有响应5秒钟以上 ...

  4. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  5. DDoS攻防战(三):ip黑白名单防火墙frdev的原理与实现

    在上一篇文章<DDoS攻防战 (二) :CC攻击工具实现与防御理论>中,笔者阐述了一个防御状态机,它可用来抵御来自应用层的DDoS攻击,但是该状态机依赖一个能应对大量条目快速增删的ip黑白 ...

  6. textBox只能输入汉字

    private void textBox1_KeyPress(object sender, KeyPressEventArgs e) { if ((e.KeyChar > 0 && ...

  7. InputFormat 总结

    在mr中的输入类,常见的InputFormat是TextInputFormat,也是mr默认的文件处理类,处理普通文本文件,作用是 1 每一行作为一个记录,将每一行在文件中的起始偏移量做为key,内容 ...

  8. 【LeetCode】168 & 171- Excel Sheet Column Title & Excel Sheet Column Number

    168 - Excel Sheet Column Title Given a positive integer, return its corresponding column title as ap ...

  9. 【转】Linux Page Cache的工作原理

    1 .前言 自从诞生以来,Linux 就被不断完善和普及,目前它已经成为主流通用操作系统之一,使用得非常广泛,它与Windows.UNIX 一起占据了操作系统领域几乎所有的市场份额.特别是在高性能计算 ...

  10. F#相关图书推荐

    C#与F#编程实践 作      者 [捷] Tomas Petricek,[英] Jon Skeet 著:贾洪峰 译 出 版 社 清华大学出版社 出版时间 2011-10-01 版      次 1 ...