作者:zccst
参考网址:
Grunt教程——初涉Grunt
http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
Grunt教程——安装Grunt
http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html
Grunt教程——Gurnt任务的配置
http://www.w3cplus.com/tools/grunt-tutorial-configuring-tasks.html
一、实践
实践1:最基础(能运行起来)
第一步:搭建环境,主要是nodejs, npm, grunt(grunt-cli)
$ mkdir installGrunt
$ cd installGrunt
$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5
第二步:创建 package.json
# 在项目的根目录下创建package.json文件
(1)根据grunt-init模板自动创建一个特定的package.json文件;(需要先安装 npm install -g grunt-init)
(2)在命令终端通过npm init命令自动创建一个基本的package.json文件;(亲自测试过)
(3)从官网上复制或者下载一个package.json文件;(对新手最方便)
(4)手工创建一个package.json文件;(对高手最方便)
添加依赖
(1)逐个添加,逐个执行命令 $ npm install XXX --save-dev
XXX是常用插件名,如grunt-contrib-jshint
最好是全称,不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。
(2)也可以一次在package.json中添加多个插件,然后一次执行命令 $ npm install
安装声明的依赖关系grunt插件同时, 在项目根目录下添加一个node_modules目录,目录中放置对应grunt插件所需的插件目录名。
注:当你给npm install添加 --save-dev标志是,一个波浪线范围将被用于你的package.json中。(建议)
第三步:创建Gruntfile.js
# 添加自己合适的gruntfile配置,运行,得出预期输出
module.exports=function(grunt){
//任务配置
grunt.initConfig({
});
//载入任务
grunt.loadNpmTasks();
//注册任务
grunt.registerTask();
}
内容参见demo1
$ grunt #
运行成功,在目标目录下创建了一个压缩后的js,引用压缩后的js,效果一样。
实践2:加上css压缩的过程
1,在package.json使用命令加一个插件
npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对,下了两个
2,在Gruntfile.js中三个部分都加入cssmin相关的命令
3,运行grunt
注:如果已经在initConfig里配置了uglify和cssmin,则不能再注册任务名为uglify和cssmin,报错如下
(node) warning: Recursive process.nextTick detected. This will break in the next version of node.
Please use setImmediate for recursive deferral(递归延迟).
解决办法:注释掉
//grunt.registerTask("uglify",['uglify']);
//grunt.registerTask("cssmin",['cssmin']);
grunt.registerTask("default",['uglify','cssmin']);//默认执行的任务
参考文档:
http://www.k68.org/?p=1232
grunt.initConfig配置详解
简单的能运行起来,到真正的能够在项目中用起来,中间还有很长的一段路要走。
那就是熟悉配置参数的含义,以能够使用较复杂的配置参数,完成工作。
之前一直对配置参数的含义一直似懂非懂,在网上搜的东西一般都是片段,说得不够完整和透彻(被这些文章害苦了,折腾了很久,始终没有完整理解),其实有三个地方非常容易能找到:
1,官网-配置任务 一节描述的很清楚,包括任务的结构和参数含义。
http://www.gruntjs.net/docs/configuring-tasks/
2,github搜对应的任务。如grunt-cmd-transport
3,github上通过seajs等推荐的链接。如:
https://github.com/seajs/seajs/issues/672
常用插件:
grunt-contrib-jshint(js语法检查)
grunt-contrib-uglify(采用UglifyJS压缩js)
grunt-contrib-concat(js合并)
grunt-contrib-cssmin(Css压缩合并)
grunt-htmlhint(html语法验查)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
NodeJs6.x+Express4.x+Mongodb搭建电影网站,搭建工具Express4.x grunt,技术点包括用户模型及密码处理,用户登录、注册、注销,权限逻辑判断、用户评论、用户回复、电影分类、连接豆瓣api、pv统计、mocha+should.js...
grunt.initConfig({ depGraph: { production: { options: { includeBindings: true, moduleName: function (importPath, modulePath) { return path.join(path.dirname(modulePath), import...
grunt-yui-compressor-源码.rar
“doiuse”任务概述在项目的 Gruntfile 中,将名为doiuse的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( {doiuse : {options : {"browsers" : [ '> 1%' , 'last 2 versions
grunt-cli, Grunt接口命令 grunt Grunt 命令行 接口。全局安装,你就可以在系统的任何位置访问 grunt 命令。npm install -g grunt-cli注意:命令的工作是加载并运行你在本地安装的Grunt版本,不管它的版本
前端开源库-grunt-mocha-chai-sinon.zip
grunt-json-合并 Grunt插件可合并处理键覆盖的JSON文件 ...在项目的Gruntfile中,向传递给grunt.initConfig()的数据对象添加一个名为json_merge的部分。 grunt . initConfig ( { json_merge : { options : {
grunt-ngcom 有史以来最好的 Grunt 插件。...在项目的 Gruntfile 中,将名为ngcom的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( { ngcom : { options : { // Task-specific o
CentOS7下Elasticsearch-head,grunt,node-v12.11.1-linux-x64.tar.xz安装包,其中Elasticsearch-head已经配置好解压就可以用了,具体安装方法可以参考博客:CentOS7下安装Elasticsearch-7.3.2:...
Grunt自动构建工具可以大幅提高web前端开发的生产力,推荐搭配Less或Sass技术
grunt-iconfonts 0.1.0 从 icomoon.io 导入图标字体这个插件导入从下载的图标字体...“iconfonts”任务概述在项目的 Gruntfile 中,将名为iconfonts的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initC
咕噜声流线型 编译streamline.js 代码。...在项目的Gruntfile,添加一个名为段streamline来传送到数据对象grunt.initConfig() 。 grunt . initConfig ( { streamline : { options : { // Task-sp
咕es声使用验证文件安装$ npm install --save-dev grunt-eslint用法require ( 'load-grunt-tasks' ) ( grunt ) ;...例子自定义配置和规则grunt . initConfig ( {eslint : {options : {configFile : 'co
load-grunt-initconfig将在.initconfig目录中查找配置文件。 这是一个示例项目结构: $ tree -a . ├── .initconfig | ├── clean.js | ├── copy.json | ├── jshint.js | └── mochaTest.json └── ...
在initConfig配置要删除的目录或文件: grunt . initConfig ( { // ... other configs clean : { js : { dirs : [ "js/dist/" , "./js/dist" ( directory name does not contain a slash ( "/" ) in ...
使用grunt-babel 转换es6 到es5依赖库
接下来,将此行添加到项目的grunt文件中: grunt . loadNpmTasks ( "grunt-remove-logging" ) ; 最后,将配置设置(见下文)添加到您的grunt文件中。 文献资料 此任务具有两个必需的属性src和dest 。 src是源文件...
Grunt模板项目CoffeeScript + RequireJS 用于Grunt托管环境的CoffeeScript + RequireJS模板项目。 您可以通过不带参数的命令grunt从默认任务开始grunt,它将监视所有项目coffeescript文件中的更改,以及重建您的...
grunt-coffeelint, 使用 grunt.js 和 coffeelint Lint你的CoffeeScript coffeelint用 CoffeeLint 你的CoffeeScript 。 安装安装npm包,位于项目 file:的Gruntfile.js 旁边npm install grunt-coffeelint
使用高级猫鼬使用高级 socket.io(实验性的,不确定如何正确使用) 使用SASS 更多用于开发(观察、实时加载)和部署(编译、构建、连接、丑化、压缩、md5 等)的预定义 grunt 任务要求MongoDB 节点 >= 0.11.9 Ruby...