`
zccst
  • 浏览: 3319233 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

grunt使用

阅读更多
作者:zccst
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


待查的资料:
gulp

Grunt打造前端自动化工作流
http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml

【grunt整合版】30分钟学会使用grunt打包前端代码
http://www.cnblogs.com/yexiaochai/p/3603389.html



1,grunt安装
(1)安装grunt CLI
npm install -g grunt-cli  #把grunt命令植入系统路径,这样就能在任意目录运行他
按照官方的说法,grunt-cli只是为了在同一台机器上安装不同的grunt版本,那么咱们先不去管他。

(2)在项目中使用grunt
首先在D盘新建一个项目(文件夹就好),在里面新增两个文件 
① package.json
② Gruntfile.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的配置了,其中详细定义了每个任务的细节和执行任务的顺序等。

(3)安装grunt任务
npm install grunt --save-dev



2,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已经定义好的值。

一般完整的grunt.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.registerTask('default', ['transport', 'concat']);
};



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






常用的任务有:

grunt-cmd-transport  #负责提取模块中的依赖,并为每个模块设置模块ID。dialog是任务的其中一个目标(Target),files中定义了要对哪些文件执行该任务(src),以及执行任务后,生成的文件放在什么地方(dest)。

grunt-cmd-concat  #将多个合并文件为一个文件。

grunt-contrib-uglify    #压缩dist/xx.js到dist/xx.min.js。

grunt-contrib-jshint    #提示

grunt-contrib-clean  #清除临时文件夹(build之后)

grunt-rev-md5         #grunt-rev 还是老样子,作用是把制定的文件或者文件夹里的文件名前加入 md5 字符串, 比如 css/app.css 被重命名为 css/ae35dd05.app.css
但是这时候模板里的标签还是没有替换的。所以需要用到 grunt-usemin 用来替换模板里的链接为更改后的

grunt-contrib-cssmin  #压缩css


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    前端自动化构建工具grunt使用教程.zip

    前端自动化构建工具grunt使用教程.zip 除了webpack,别忘了还有其它自动化构建工具

    Grunt安装与使用

    **四、Grunt使用** 1. 加载插件:在Gruntfile.js中,使用`grunt.loadNpmTasks('plugin-name')`加载你需要的任务插件。 2. 配置任务:在配置对象中,定义任务的属性和选项,如源文件和目标文件路径。 3. 注册任务:...

    Grunt 离线安装包

    这个“Grunt 离线安装包”是为了那些网络环境不稳定或者需要在没有互联网连接的环境中使用 Grunt 的用户准备的。 首先,我们来理解一下 Grunt 的核心概念。Grunt 是一个基于配置的工具,通过编写 `Gruntfile.js` ...

    grunt demo

    Grunt 使用模块化的结构,每个任务可以看作是一个独立的模块,这些模块(插件)能够完成特定的任务,如 CSS 压缩、JavaScript 合并等。 **安装与配置 Grunt** 首先,确保已经安装了 Node.js 和 npm(Node 包管理器...

    grunt学习资料

    提供的压缩包文件"grunt"可能包含了示例的配置文件、源代码和其他辅助文件,用于帮助学习和理解Grunt的使用。在学习过程中,建议结合具体的项目实践,以加深对各个任务和插件的理解。同时,不断探索和尝试新的Grunt...

    grunt-wordpress, 用于将内容发布到WordPress的Grunt插件.zip

    grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。支持这里项目通过捐赠在Gratipay上。正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 ...

    grunt-cli模块

    一旦安装了grunt-cli,你就可以在项目目录中使用`grunt`命令。首先,确保你的项目已经包含了`grunt`和相关的任务插件。在项目根目录下运行: ```bash npm init ``` 这会创建一个`package.json`文件,记录项目的...

    Jshint, Grunt

    Grunt 使用 JSON 格式的配置文件(`Gruntfile.js`)来定义任务和工作流程,使得项目构建过程标准化和可维护。 在 "node_modules" 文件夹内,Grunt 的模块可能包括: 1. `grunt.js`:Grunt 的核心执行文件。 2. `...

    grunt-cli压缩包-0.1.13版本

    使用`grunt-cli`时,开发者通常会在项目根目录下执行`grunt`命令,这样`grunt-cli`会查找当前目录下的Gruntfile.js,如果没有找到,它会向上搜索直到找到或者到达文件系统的根目录。一旦找到,它就会加载并执行配置...

    Grunt的使用demo

    Grunt的使用demo,包含4个插件:jshint, watch, uglify, concat

    打包构建工具gulp或grunt

    与Gulp不同,Grunt使用JSON格式的配置文件(Gruntfile.js)来定义任务。这种配置方式对新手友好,但可能会导致配置文件变得冗长且难以维护。Grunt有丰富的插件生态系统,可以处理各种构建需求,例如文件复制、代码...

    angularsys:使用 yo 和 grunt 使用 angular.js 进行测试的项目

    角度系统使用 yo 和 grunt 使用 angular.js 进行测试的项目先决条件您将需要在您的计算机上正确安装以下东西。 (带有 NPM) (用于开发)安装git clone 这个仓库切换到新目录npm install bower install运行/开发...

    前端开源库-grunt-template-jasmine-requirejs

    “grunt-template-jasmine-requirejs”正是一个专门为使用Grunt、Jasmine和RequireJS的项目设计的模板。它旨在帮助开发者快速设置一个集成了这三个工具的测试环境,以进行高效的前端测试。 具体来说,该模板提供了...

    使用grunt进行前端工程化构建

    ### 使用grunt进行前端工程化构建 #### 一、引言 在前端开发领域,随着项目的复杂度不断提高,传统的手动操作已经难以满足高效开发的需求。此时,自动化构建工具应运而生,其中Grunt作为一款非常受欢迎的任务运行...

    Grunt入门练习Demo

    这个"Grunt入门练习Demo"旨在演示如何使用Grunt进行文件合并和压缩,以及实时监听和自动构建。通过学习和实践这个Demo,你可以更好地理解Grunt的工作原理,并为自己的项目定制自动化流程。Grunt的强大之处在于它的...

    grunt-purifycss, 使用grunt构建工具删除未使用的CSS.zip

    grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...

    grunt项目构建样例

    - 对于大型项目,考虑使用`grunt-load-config`或`grunt-include-source`等插件来更好地组织和管理配置。 - 结合其他工具如`jshint`进行代码质量检查,`autoprefixer`自动添加CSS前缀等,提升项目质量。 7. **持续...

    [转]学会使用grunt打包前端代码

    【标题】:“学会使用grunt打包前端代码” 在前端开发中,构建工具的使用至关重要,它可以帮助我们自动化处理各种任务,例如合并文件、压缩代码、版本管理等。Grunt 是一个广泛使用的JavaScript构建工具,它基于...

    grunt-typograf:使用Grunt使用Typograf准备文本

    unt-typograf 使用为Grunt准备文本。安装npm install typograf grunt-typograf --save-dev用法Gruntfile.js module . exports = function ( grunt ) { grunt . initConfig ( { typograf : { compile : { options : {...

Global site tag (gtag.js) - Google Analytics