小白的Grunt入门之旅

  前段时间说要学习grunt很久了,可是这两周不是在做项目就是在去做项目的路上.现在终于可以好好得去入门了。边学边写,就把这个过程说一下吧。

  首先,Grunt 依赖 Node.js 所以先要安装node.这里附上node的安装方法:http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

安装 Grunt

  实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。

方法如下:

  1 npm install -g grunt-cli

  可能npm在中国比较慢,可以加上一个淘宝的镜像:--registry=https://registry.npm.taobao.org  ,即输入:

  1 npm install -g grunt-cli --registry=https://registry.npm.taobao.org

控制台出现了这个的时候代表已经安装成功了。(需要注意,因为使用 -g 命令会安装到全局,可能会涉及到系统敏感目录,如果用 Windows 的话,可能需要你用管理员权限,如果用 OS X / Linux 的话,你可能需要加上 sudo 命令。)

  

编写package.json

  在项目文件夹下面,打开命令行,输入指令

1  npm init 

  之后就出来很多信息,然后开始填写项目名称,填写好了之后回车即可。或者一路回车下去。这时就会生成一个文件,叫package.json 里面的信息是自动生成的:

 1 {
 2   "name": "node",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "",
10   "license": "ISC"
11 }

  接下来你就可以在编辑器里面修改你的 package.json的代码了

  

Grunt 和插件

可是我们现在还是没使用到grunt和它的插件,我们日常的项目有什么东西是需要的呢?

比如:检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。

就现在的这个示例项目而言,我打算让 Grunt 帮忙实现下面几个功能:

差不多就是这些,根据这些任务需求,需要用到:

它们的命名和文档都很规范,因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包,比如grunt-contrib-concat - npm 你也可以在这上面看到用法等。

下面我们就要在这个项目中安装这些插件,执行命令:

npm install grunt --save-dev

表示通过 npm 安装了 grunt 到当前项目,同时加上了 —save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下,是不是多了

1   "devDependencies": {
2     "grunt": "^0.4.5"
3   }

没错,这个的意思就是当前项目依赖 grunt,后面是它的版本,咱们不用管。如果安装的时候没有添加 —save-dev 参数,这里就不会出现了,你需要自行添加上去。

下面我们来安装 Grunt 的插件,当然,不需要一个个的安装,太麻烦了,我们可以:

1  npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

这时你的package.json文件就变成了这样:

 1 {
 2   "name": "zyy_node",
 3   "version": "1.0.0",
 4   "description": "for zyy to learn grunt",
 5   "main": "index.js",
 6   "dependencies": {
 7     "grunt-contrib-concat": "^0.5.1",
 8     "grunt": "^0.4.5",
 9     "grunt-contrib-connect": "^0.11.2",
10     "grunt-contrib-sass": "^0.9.2",
11     "grunt-contrib-uglify": "^0.10.0",
12     "grunt-contrib-watch": "^0.6.1"
13   },
14   "devDependencies": {
15     "grunt": "^0.4.5"
16   },
17   "scripts": {
18     "test": "echo \"Error: no test specified\" && exit 1"
19   },
20   "keywords": [
21     "grunt"
22   ],
23   "author": "zyy",
24   "license": "MIT"
25 }

配 Gruntfile.js

Gruntfile.js可以写任意的 JS 代码,比如声明一个 对象 来存储一会要写任务的参数,或者是一个变量当作开关等等。

1 module.exports = function(grunt) {
2     //所有的代码要包裹在里面
3 };

按照官网,里面的主要是为三个部分:

  • 初始任务配置
  • 插件加载
  • 任务注册

顾名思义,这三块代码,任务配置代码就是调用插件配置一下要执行的任务和实现的功能,插件加载代码就是把需要用到的插件加载进来,任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。

这样,就可以用 grunt 来执行注册的一个 task 从而根据任务配置代码调用需要的插件来执行相应的操作。

下面来分别看一下这三块代码的写法。

任务配置代码

例如下面代码:

 1 module.exports=function(grunt){
 2      grunt.initConfig({
 3         pkg: grunt.file.readJSON(‘package.json‘),   //功能是读取 package.json 文件
 4         uglify: {
 5         //新建了一个基于 uglify 的任务 build,功能是把 src/<%= pkg.name %>.js 压缩输出 build/<%= pkg.name %>.min.js
 6         options: {
 7             banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
 8         },                              // <%= pkg.name %> 来输出项目名称)
 9         build: {
10         src: ‘src/<%= pkg.name %>.js‘,           //  内容是把 XX.js 压缩输出到 xx.min.js 里面
11         dest: ‘build/<%= pkg.name %>.min.js‘
12       }                             //如果你需要更多压缩任务,也可以参照 build 多写几个任务
13     }
14         less:{
15              //这里的配置是根据less插件的配置文档来配置的
16              css:{
17                  files:{
18                     //前面是要生成的css,后面是要编译的sass
19                      ‘src/index.css‘:‘src/index.sass‘
20                  }
21              }
22          },
23         watch: {
24             less:{
25                files:[‘src/*.less‘],
26                tasks:[‘less‘]
27            }
28          }//这里的配置是根据watch插件的配置文档来配置的
29      });
30
31      grunt.loadNpmTasks(‘grunt-contrib-sass‘);
32      //监控
33      grunt.loadNpmTasks(‘grunt-contrib-watch‘);
34
35      grunt.registerTask(‘default‘,[‘watch‘]);
36  }

下面是一个实例,编译出sass:

/*
* @Author: zyy
* @Date:   2015-11-05 12:33:50
* @Last Modified by:   Marte
* @Last Modified time: 2015-11-05 12:38:57
*/

module.exports = function(grunt) {

  var sassStyle = ‘expanded‘;

  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    sass: {
      output : {
        options: {
          style: sassStyle
        },
        files: {
          ‘try.css‘: ‘try.scss‘
        }
      }
    }
  });

  grunt.loadNpmTasks(‘grunt-contrib-sass‘);

  grunt.registerTask(‘outputcss‘,[‘sass‘]);
  grunt.registerTask(‘default‘);

};

然后在目录下打开控制台:,执行一下 grunt 命令,结果报错 undefined,没错,因为我们的 default task 里面没有定义任何任务,然后执行 grunt outputcss 命令,提示编译 Scss 文件成功。



回到目录,发现这样就多了两个文件了,如果想要文件一保存就能够更新,就可以添加一个
grunt.loadNpmTasks(‘grunt-contrib-watch‘);




未完待续.....

参考文档:
http://rbin-life.github.io/2015/10/26/Hello-Grunt/
http://yujiangshui.com/grunt-basic-tutorial/

  

时间: 2024-10-24 21:10:58

小白的Grunt入门之旅的相关文章

零基础小白,如何入门计算机视觉?

计算机视觉是人工智能技术的一个重要领域,打个比方(不一定恰当),我认为计算机视觉是人工智能时代的眼睛,可见其重要程度.计算机视觉其实是一个很宏大的概念,下图是有人总结的计算机视觉所需要的技能树. 如果你是一个对计算机视觉一无所知的小白,千万不要被这棵技能树吓到.没有哪个人能够同时掌握以上所有的技能,这棵树只是让你对计算机视觉有个粗浅的认识. 先来打点鸡血,看看计算机视觉有什么用吧.下面的视频是计算机视觉在自动驾驶上的实际应用,其中涉及立体视觉.光流估计.视觉里程计.三维物体检测与识别.三维物体跟

Grunt入门教程之二 —— concat插件

Grunt入门教程之二 Concat插件 concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如: a.js b.js c.js 当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度. 如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了.一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候

【笨木头Unity】入门之旅010(完结):Demo之四处找死(五)_UI

UI是游戏里必不可少的元素,在Unity里添加UI是比较轻松的事情,但要玩好它,可就不那么轻松了. 没关系,先入门. 笨木头花心贡献,啥?花心?不,是用心. 转载请注明,原文地址:http://www.benmutou.com/archives/2196 文章来源:笨木头与游戏开发 1.创建UI 很早之前也介绍过怎么创建UI,这里简单再回顾一下. 在Hierarchy窗口中点击右键,依次选择[UI]-[Text]. 我们会看到窗口中,多了一个Canvas和Text: 2.让UI跟随物体移动 由于

Grunt入门教程之(三)

Grunt入门教程之三 Yuidoc插件 Yuidoc 是一个可以将代码注释生成HTML格式文档的工具,文档的生成完全基于JavaDoc风格的代码注释规则. 我们在写公共模块或者API的时候,往往会输出文档给调用者查看,这时候Yuidoc就是一个很好的助手. 下面介绍一下如何在Grunt中使用Yuidoc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 grunt.initConfig({ pkg: grunt.file.readJSON('package.jso

Swift语言入门之旅 (翻译自《The Swift Programming Language》电子书)

关于Swift Swift是为IOS和OSX应用制定的新编程语言,吸取C和Objective-C语言的精粹,但不损失与C语言的兼容性.Swift采用安全编程模型.加入了各种现代编程语言特性,使得该语言更易被掌握.更具扩展性,用起来更有趣.Swift语言的奠基石是已经成熟的.并为大家所喜爱的Cocoa和Cocoa Touch框架,新语言使大家可以尽情畅想新软件开发的机遇. Swift沉积了多年的研发成果,苹果公司为提供高效Swift语言编译器.调试器和基础架构打下了坚实基础.我们使用Automat

Apache Solr初学者教程(入门之旅)

Apache Solr初学者教程(入门之旅) 写在前面:本文涉及solr入门的各方面,请逐行阅读,相信能帮助你对solr有个清晰全面的了解和使用. 在Apache Solr初学者教程的这个例子中,我们将讨论有关如何安装最新版本的Apache Solr,并告诉你如何配置它.此外,我们将告诉你如何进行使用solr的样本数据文件索引.Apache Solr支持不同格式,包括各种数据库,PDF文件,XML文件,CSV文件等等.在这个例子中,我们的索引将研究如何索引数据从一个CSV文件. 我们首选的这个例

Swift语言入门之旅

学习一门新的计算机语言,传统来说都是从编写一个在屏幕上打印"Hello world"的程序开始的.那在 Swift,我们使用一句话来实现它: println("Hello, world") 如果你编写过C或者Objective-C语言,Swift中的这个语法看起来便很熟悉,这句话却是一个完整的程序 .你无须为了得到输入/输出或字符串处理去导入一个独立的功能库.编写全局代码通常用于程序的进入 点.你不需要写一个main函数,你也不需要为每个语句写个逗号作为结尾. 这个

小猿圈平台如何带小白学习python入门视频教程

Python开发技术近年来非常火热,尤其是在一线城市对于python开发人才需求一直扩大.很多企业对于python开发技术人才不惜重金招募.所以学习Python技术的人越来越多,初学Python开发技术的小伙伴对Python不是很了解,不知道Python技术好不好学,更不知道自己能否学好Python开发,本篇文章小编就和大家分享一下小猿圈平台如何带小白学习python入门视频教程? 小猿圈平台如何带小白学习python入门视频教程: 我们先来了解一下Python的学习路线,Python入门课程第

一个编程小白,如何入门APP软件开发领域?

近些年,互联网创业火得不得了!一时间,满世界都在招做App软件开发的专业人员.从大众角度来看,学编程,写代码,是一件非常困难的事情.但是,App开发人员的工资那么诱人,让很多小白也跃跃欲试想学一下.那么,一个编程小白如何入门App软件开发领域呢?如何快速掌握App开发技术呢? 对于APP开发,如何选择原生与混合,小编的意见就是选择自己擅长的,对于新手来说,选择简单的.从无到有,循序渐进,这样子从个人学习进度.学习兴趣来讲,都是合适的.一下子来个高大上,只能让你陷入困境.学习程序我的经验是,先看语