原文地址:

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. activiti 学习( 三 ) 之 流程启动者

    在启动一个流程时,我们会有将当前用户启动的流程保存起来,作为流程发起人(启动人.申请人.提交人) 而在保存这个流程启动者信息,api 没有明确规范该怎么存.所以这里我总结下我学到的保存流程启动者信息的 ...

  2. python练习程序(c100经典例16)

    题目: 输入两个正整数m和n,求其最大公约数和最小公倍数. def foo(a,b): if a<b: (a,b)=(b,a) aa=a; bb=b; while b!=0: tmp=a%b; ...

  3. 本地工程提交github

    1. 首先在github上创建一个新的Repository 2. 在本地windows机器上装上git 3. 建立一个文件夹,以后就用这个文件夹作为与Repository对应的库文件夹 4. 输入一下 ...

  4. (二)深入梯度下降(Gradient Descent)算法

    一直以来都以为自己对一些算法已经理解了,直到最近才发现,梯度下降都理解的不好. 1 问题的引出 对于上篇中讲到的线性回归,先化一个为一个特征θ1,θ0为偏置项,最后列出的误差函数如下图所示: 手动求解 ...

  5. Android Studio 学习 - HelloWorld

    今天是学习Android Studio的第2天,加油! 1. 首先要记录下使用Android Studio的一个代码自动完成的功能.平常基本上用Delphi,乍一换工具,各种不习惯,或者说不熟悉.按照 ...

  6. 【网络】TCP三次握手

    在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手: ...

  7. centos下安装python

    下载网址:http://ftp.gnu.org/gnu/gdb/ 1.编译python必须安装开发工具 # yum groupinstall "Development tools" ...

  8. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 select_from_list_by_value(self, locator, *values)

    def select_from_list_by_value(self, locator, *values): """Selects `*values` from list ...

  9. 代码所见所得方式发布.xml

    pre{ line-height:1; color:#b836b3; background-color:#000000; font-size:16px;}.sysFunc{color:#19ef0b; ...

  10. pycharm出现乱码

    1. 'gbk' codec can't encode character u'\xb8' 解决办法 import sys reload(sys)sys.setdefaultencoding('utf ...