如何设置Grunt
原文地址:
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的更多相关文章
- grunt任务之seajs模块打包
grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...
- (绝对官方好用,快速上手)针对grunt之前写的那篇有些乱,这次总结个清晰的
安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界 ...
- Grunt :任务自动管理工具
来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码 ...
- 转:Grunt:任务自动管理工具
Grunt:任务自动管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:gru ...
- Grunt打包之seajs项目【转】
原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- Grunt:任务自动管理工具(收藏+转载)
原文:http://javascript.ruanyifeng.com/tool/grunt.html 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:grunt-contr ...
- grunt简记
grunt和gulp都是前端自动化的工具,grunt更成熟,插件社区全.大:gulp比较年轻,性能更好,更简单容易.具体使用哪种可根据实际项目组来决定. 创建任务 grunt默认执行的是default ...
- 现代JavaScript开发者的工具箱
自从HTML5变得流行以来,整个Web平台取得了长足的进步,人们也开始将JavaScript视为一门能够创建复杂应用的语言.许多新的API纷纷浮现,而关于浏览器如何应用这些技术的文章也大量涌现. 作为 ...
随机推荐
- django - from django.db.models import F - class F
F() 的执行不经过 python解释器,不经过本机内存,是生成 SQL语句的执行. # Tintin filed a news story! reporter = Reporters.objects ...
- 【英语】Bingo口语笔记(41) - 有关爱情的表达
- 一道program test题目
前天去面试的一道上机测试题(凭记忆写的题目)Question:给定输入整数\(\left( k \right)\),找到最小的自然数\(n\left( {n \ge 1} \right)\),使得下列 ...
- Oracle 单实例 迁移到 RAC 实例 -- 使用RMAN 异机恢复
Oracle 官网有关单实例迁移到RAC的一个步骤说明: How to Convert 10g Single-Instance database to 10g RAC using Manual Con ...
- cocos2dc-x解决中文乱码
中文乱码: 方法一: 选中有中文的那个cpp,点文件另存为,在保存这里竟然有个小箭头 点之,再点编码保存 再选这个编码 这个cpp就UTF-8化了,然后中文就正常了. 但是发现:但字符串字符数为奇数时 ...
- Android无法调用JS的问题解决
1.启用JS webView.getSettings().setJavaScriptEnabled(true); 2.需要使用WebChromeClient(如果没有这个Client,很多东西不会响应 ...
- “-bash: svn: command not found”
今天升级了Xcode5.界面更加的清爽了,但是在命令行里SVN也失去了作用了. 当我要更新的时候提示:“-bash: svn: command not found” 解决办法: 1:打开Prefere ...
- top命令 Linux查看CPU和内存使用情况
一.top命令 top命令是一个功能十分强大的监控系统的工具,对于系统管理员而言尤其重要.但是,它的缺点是会消耗很多系统资源. 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分 ...
- 【转】Win 7 下源码运行OpenERP7.0
原文地址:Win 7 下源码运行OpenERP7.0 安装Python2.7 下载地址:http://www.python.org/getit/注:OpenERP7.0支持的Python版本最高为2. ...
- 运行Python2.x程序报编码错误的解决办法-UnicodeDecodeError: 'ascii' codec can't decode byte 0xb7 in position 7: ordina not in range(128)[0m
Python编码问题的终极解决方案:在python的Lib\site-packages文件夹下新建一个sitecustomize.py文件,输入: import sys sys.setdefaulte ...