关于Grunt

简介

Q:Grunt为何物?

A:一个专为JavaScript提供的构建工具。

Q:啥是构建工具?

A:在项目部署上线前,通常要将源文件压缩,合并,并拷贝到bch或trunk中。
在将js模块化后,又多了一个分析,提取业务代码中所依赖模块的工作。
解决这一系列繁重工作的自动化工具,称之为构建工具。

Q:grunt是如何工作的?

A:刚刚接触grunt,举个例子可能不太恰当,但应该可以让你先比较准确的认识她。
就好像一个万能工厂(grunt),只负责执行任务(Task),不关心每个任务到底都干了什么。
这些任务比如:

  • clean:删除临时文件
  • uglify:压缩
  • qunit:测试
  • concat:合并

任务流程可能是这样的:

  • task:clean
  • task:uglify
  • task:qunit
  • task:concat

安装

前提是你已经安装了nodejsnpm。 你可以在 nodejs.org 下载安装包安装,也可以通过包管理器(比如在 Mac 上用 homebrew,同时推荐在 Mac 上用 homebrew)。

安装grunt CLI

npm install -g grunt-cli

按照官方的说法,grunt-cli只是为了在同一台机器上安装不同的grunt版本,那么咱们先不去管他。

在项目中使用grunt

首先需要往项目里添加两个文件:package.jsonGruntfile.js

  • package.json:该文件用来为npm存放项目配置的元数据,与grunt关系最大的配置在devDependencies中。
"devDependencies": {
        "grunt": "~0.4.1",
        "grunt-cmd-transport": "~0.2.0",
        "grunt-cmd-concat": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.0",
        "grunt-contrib-clean": "~0.4.0"
    }
  • Gruntfile.js:注意G的大写,这个文件就是grunt的配置了,其中详细定义了每个任务的细节和执行任务的顺序等。

安装grunt

在命令行进入项目所在目录,键入如下命令即可,npm会根据devDependencies中的配置,将需要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev

传说中简单的配置T-T

终于到了简单配置环节,就从Gruntfile.js入手,一点点的认识grunt

一个几乎是Gruntfile.js通用的写法:

    module.exports = function(grunt) {
      grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘);
      });
    };

由于篇幅关系,这里只简单说下。grunt配置的主体都在grunt.initConfig

pkg: grunt.file.readJSON(‘package.json‘)是为了以后在其它任务(task)中方便读取package.json已经定义好的值。

下面我们来了解下任务(task):

    transport: {
            dialog: {
                files : [
                    {
                        src : ‘*‘,
                        dest : ‘.build/styles/component/dialog/src‘
                    }
                ]
            }
        }

transport就是一个任务(task),她是这次spm2所提供的一系列grunt构建插件的其中一个,该插件主要负责提取模块中的依赖,
并为每个模块设置模块IDdialog是任务的其中一个目标(Target),files中定义了要对哪些文件执行该任务(src),
以及执行任务后,生成的文件放在什么地方(dest)。

下一个任务是合并(concat):

    concat: {
            dialog: {
                files: {
                    "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                }
            }
        }

concat的内容是合并依赖的模块,有很多需要设置的地方,因为本文档目的只是介绍grunt
所以这里简单说,该配置采用了另外一种srcdest的写法。相信大家只要理解了任务(task)和目标(target)后应该很好理解。

最后,加载grunt需要的插件:

    grunt.loadNpmTasks(‘grunt-cmd-transport‘);
    grunt.loadNpmTasks(‘grunt-cmd-concat‘);

还要告诉grunt该怎么执行这些任务:

    grunt.registerTask(‘build‘, [‘transport‘, ‘concat‘]);

完整的Gruntfile.js

    module.exports = function(grunt) {
          grunt.initConfig({
            pkg: grunt.file.readJSON(‘package.json‘),

            transport: {
                        dialog: {
                            files : [
                                {
                                    src : ‘*‘,
                                    dest : ‘.build/styles/component/dialog/src‘
                                }
                            ]
                        }
                    },
            concat: {
                        dialog: {
                            files: {
                                "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                            }
                        }
                    }
          });

          grunt.loadNpmTasks(‘grunt-cmd-transport‘);
          grunt.loadNpmTasks(‘grunt-cmd-concat‘);

          grunt.registerTask(‘build‘, [‘transport‘, ‘concat‘]);
        };

最后的最后,进入项目所在目录,命令行输入:

grunt build

一切顺利的话,你就可以看到变化了!

时间: 11-18

关于Grunt的相关文章

grunt 入门学习

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le

grunt使用心得

这是我在使用前端构建工具grunt的一些总结,希望对大家有一定的帮助,也希望大家一起讨论一起进步. http://cobish.github.io/%E5%89%8D%E7%AB%AF/2015/06/28/grunt-use.html

Grunt的wiredep任务的配置说明文档

Automatically inject Bower components into the HTML file 自动把Bower的组件注入到HTML文件中 如果我们通过以下方式安装组件 bower install jquery --save bower install sea.js --save 安装后会在bower.json文件中看到 { "name": "framework-demo", "private": true, "dep

grunt之easy demo

首先安装grunt-cli cnpm install -g grunt-cli 接下来创建package.json,内容如下 {        "name": "demo",        "file": "zepto",        "version": "0.1.0",        "description": "demo",       

grunt默认只允许localhost和访问,如何设置外部IP地址访问

使用Yeoman生成器创建web项目,使用grunt server启动,默认访问地址为127.0.0.1:9000或者localhost:9000 如果用本机地址如:192.168.1.100:9000访问默认是访问不到的 想要通过IP地址访问需要修改Gruntfile.js的配置: 修改connect节点配置,原本的配置如下: 可以看到hostname上面有注释,大概意思是:将地址改为'0.0.0.0'可从外部访问. 修改成下图,我们的grunt server就可以从外部访问啦!

【grunt】两小时入门

目录: 1. 用途和场景 2.Grunt插件 3.相关资源 4.环境安装 5.开始学习 5.1 一个新项目 5.2 生成package.json 5.3 在项目中安装grunt和相关插件 5.4 Gruntfile语法 5.4.1 配置任务 5.4.2 加载插件 5.4.3 注册任务 5.5 为我们的项目配置gruntfile.js 5.6 执行任务 6.后续学习 1. 用途和场景 jshint代码检查 代码合并 代码压缩--js/css/html都可以 SASS/LESS编译css watch

Grunt Bower构建前端

Grunt + Bower-前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行数据交互. 对于后端服务语言来说,不论是Ruby的rake,Java中的Maven或Gradle,或是Scala中的SBT,他们都能够提供编译运行.运行测试.打包部署.依赖管理等功能.再加上强大的package系统,让它可以插拔式的使用很多强大的功能,像数据

grunt 合并压缩js和css文件(二)

具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modules/ src/ Gruntfile.js package.json package.json是依赖库文件 Gruntfile.js是执行步骤程序 一.js合并压缩 第一次需要先安装grunt.执行 npm install -g grunt-cli 进行安装.如果已经安装,可以忽略. 1.pack

Grunt的初级应用

Grunt是什么呢? Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. 为什么要使用Grunt? Grunt生态系统非常庞大,并且一直在增长.由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花

Grunt压缩图片

今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install --save-dev gulp-imagemin 然后引入依赖: var gulp = require("gulp"); 在引入插件: var imagemin = require('gulp-imagemin');//压缩图片 var uglifyJS = require('gulp-