关键词:
【grunt第一弹】30分钟学会使用grunt打包前端代码
前言
以现在前端js激增的态势,一个项目下来几十个js文件轻轻松松
对于复杂一点的单页应用来说,文件上百简直是家常便饭,那么这个时候我们的js文件应该怎么处理呢?
另外,对于css文件,又该如何处理呢??
这些都是我们实际工作中要遇到的问题,比如我们现在框架使用zepto、backbone、underscore
我们要如何将他们合成一个libs文件,这都是令人头疼的问题
但是grunt的出现却让这些事情变得优雅起来!
简单一键,打包结束,尼玛不是不可能啊!
grunt
是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
① 压缩文件
② 合并文件
③ 简单语法检查
对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件
初学,有误请包涵
准备阶段
1、nodeJs环境
因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了
http://www.cnblogs.com/yexiaochai/p/3527418.html
2、安装grunt
有了nodeJs环境后,我们便可以开始搞grunt了,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI
官方推荐在全局安装CLI(grunt的命令行接口)
npm install -g grunt-cli
这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,原因是
每次运行grunt时,它都会使用node的require查找本地是否安装grunt,如果找到CLI便加载这个本地grunt库
然后应用我们项目中的GruntFile配置,并执行任务
PS:这段先不要管,安装完了往下看
实例学习:打包zepto
一些东西说多了都是泪,直接先上实例吧,实例结束后再说其它的
首先在D盘新建一个项目(文件夹就好)
在里面新增两个文件(不要问为什么,搞进去先)
① package.json
{ "name": "demo", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } }
② Gruntfile.js
完了我们需要在grunt目录下执行 npm install将相关的文件下载下来:
$ cd d: $ cd grunt
然后我们的目录就会多一点东西:
多了很多东西,先别管事干什么的,我们后面都会用到,这个时候在目录下新建src文件夹,并且搞一个zepto进去
然后在Gruntfile中新增以下代码(先别管,增加再说)
然后运行 grunt命令后
grunt
嗯嗯,多了一个文件,并且是压缩的,不差!!!第一步结束
认识Gruntdile与package.json
不出意外,每一个gurnt都会需要这两个文件,并且很可能就只有这两个文件(复杂的情况有所不同)
package.json
这个文件用来存储npm模块的依赖项(比如我们的打包若是依赖requireJS的插件,这里就需要配置)
然后,我们会在里面配置一些不一样的信息,比如我们上面的file,这些数据都会放到package中
对于package的灵活配置,我们会在后面提到
Gruntfile
这个文件尤其关键,他一般干两件事情:
① 读取package信息
② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面)
Gruntfile一般由四个部分组成
① 包装函数
这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) { //你的代码 }
这个不用知道为什么,直接将代码放入即可
② 项目/任务配置
我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息
pkg: grunt.file.readJSON('package.json')
这里的 grunt.file.readJSON就会将我们的配置文件读出,并且转换为json对象
然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了
值得注意的是这里使用的是underscore模板引擎,所以你在这里可以写很多东西
uglify是一个插件的,我们在package依赖项进行了配置,这个时候我们为系统配置了一个任务
uglify(压缩),他会干这几个事情:
① 在src中找到zepto进行压缩(具体名字在package中找到)
② 找到dest目录,没有就新建,然后将压缩文件搞进去
③ 在上面加几个描述语言
这个任务配置其实就是一个方法接口调用,按照规范来就好,暂时不予关注,内幕后期来
这里只是定义了相关参数,但是并未加载实际函数,所以后面马上就有一句:
grunt.loadNpmTasks('grunt-contrib-uglify');
用于加载相关插件
最后注册一个自定义任务(其实也是默认任务),所以我们下面的命令行是等效的:
grunt == grunt uglify
至此,我们就简单解析了一番grunt的整个操作,下面来合并文件的例子
合并文件
合并文件依赖于grunt-contrib-concat插件,所以我们的package依赖项要新增一项
"devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" },
然后再将代码写成这个样子
module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat']); }
运行后,神奇的一幕发生了:
三个文件被压缩成了一个,但是没有压缩,所以,我们这里再加一步操作,将之压缩后再合并
module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } }, uglify: { build: { src: 'dest/libs.js', dest: 'dest/libs.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat', 'uglify']); }
我这里的做法是先合并形成一个libs,然后再将libs压缩成libs.min.js
所以我们这里换个做法,先压缩再合并,其实unglify已经干了这些事情了
module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { "my_target": { "files": { 'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务 grunt.registerTask('default', ['uglify']); }
所以,我们就暂时不去关注concat了
最后,今天时间不早了,我们最后研究下grunt配合require于是便结束今天的学习吧
合并requireJS管理的文件
有了前面基础后,我们来干一件平时很头疼的事情,便是将require管理的所有js文件给压缩了合并为一个文件
首先我们建立一个简单的程序,里面使用了zepto、backbone、underscore(事实上我并未使用什么)
在main.js中新增代码:
require.config({ baseUrl: '', shim: { $: { exports: 'zepto' }, _: { exports: '_' }, B: { deps: [ '_', '$' ], exports: 'Backbone' } }, paths: { '$': 'src/zepto', '_': 'src/underscore', 'B': 'src/backbone' } }); requirejs(['B'], function (b) { });
这样的话运行会自动加载几个文件,我们现在希望将之合并为一个libs.js该怎么干呢???
我们这里使用自定义任务方法来做,因为我们好像没有介绍他
要使用requireJS相关需要插件
grunt.loadNpmTasks('grunt-contrib-requirejs');
因为我们以后可能存在配置文件存在各个项目文件的情况,所以我们这里将requireJs相关的配置放入gruntCfg.json中
这样我们的package.json就没有什么实际意义了:
{ "name": "demo", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } }
我们这里设置的require相关的grunt配置文件如下(gruntCfg.json):
{ "requirejs": { "main": { "options": { "baseUrl": "", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test" }, "web": { "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } } } } }
这里我们要打包这些文件搞到dest的libs.js文件中,这个文件照做就行,最后核心代码如下:
module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); //为了介绍自定义任务搞了一个这个 grunt.registerTask('build', 'require demo', function () { //任务列表 var tasks = ['requirejs']; //源码文件 var srcDir = 'src'; //目标文件 var destDir = 'dest'; //设置参数 grunt.config.set('config', { srcDir: srcDir, destDir: destDir }); //设置requireJs的信息 var taskCfg = grunt.file.readJSON('gruntCfg.json'); var options = taskCfg.requirejs.main.options, platformCfg = options.web, includes = platformCfg.include, paths = options.paths; var pos = -1; var requireTask = taskCfg.requirejs; options.path = paths; options.out = platformCfg.out; options.include = includes; //运行任务 grunt.task.run(tasks); grunt.config.set("requirejs", requireTask); }); }
搞完了运行就好:grunt build
grunt build
如果能帮到你,打赏我吧~
设置 nvm 以正确使用 npm 和 grunt
】设置nvm以正确使用npm和grunt【英文标题】:Setupnvmtoproperlyworkwithnpmandgrunt【发布时间】:2014-11-1307:35:50【问题描述】:我对Web应用程序开发有点陌生,并且浏览了Yeoman教程,该教程使用了yo、grunt、bower和angular。我曾使用自制软... 查看详情
如何使用 grunt 部署 Angular 2?
...Angular网站的示例。我假设我要么缺少依赖项,要么没有正确部署某些东西。此外,当从终端运行“g 查看详情
探讨npm依赖管理之peerdependencies(代码片段)
引言想必前端同学对npm的devDependencies和dependencies都比较熟悉,但是对peerDependencies可能就有点陌生,尤其是没有写过npm包插件的同学,比如之前使用grunt自动化工具的相关插件(如grunt-contrib-jasmine等)或者目前基于某个框架的ui组... 查看详情
bootstrap之编译css和javascript-0基础安装grunt教程
...晚上看到bootstrap全局CSS样式中使用Less章节中提到的通过grunt重新编译CSS和Javascript文件,对于我这样从未接触过windowscmdnode控制台npm的人,学习起来就有很大的难度了。那么我们照着教程一步一步来:第一步:安装node.js网址:https... 查看详情
转载grunt整合版30分钟学会使用grunt打包前端代码
【grunt整合版】30分钟学会使用grunt打包前端代码grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并... 查看详情
grunt的初级应用
...以减轻你的劳动,简化你的工作。当你在Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。为什么要使用Grunt?Grunt 查看详情
grunt-grunt使用(代码片段)
...似后端使用的Ant,也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的,npm是nodejs 的包管理器,所以第一步需要安装nodejs环境。安装grunt之前确保npm更新到最新的版本,... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因... 查看详情
自动化构建--grunt(代码片段)
Grunt怎么使用?Grunt算是最早的一款前端构建系统了,Grunt的插件生态非常的完善,构建过程基于临时文件实现,构建过程稍微会慢一点安装Gruntyarnaddgrunt安装完成后在项目根目录添加Grunt的入口文件gruntfile.jsGrunt的入口文件用于定... 查看详情
杂项:grunt-tmod(代码片段)
ylbtech-杂项:grunt-tmod 前端模板预编译工具tmodjs的grunt自动化插件。1.返回顶部1、grunt-tmod前端模板预编译工具 tmodjs 的grunt自动化插件。GettingStarted需要环境:Grunt ~0.4.1如果你没有用过 Grunt ,可以先看一下 ... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因... 查看详情
前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt的主要组件以及它的运转机制,这篇文章是Grunt使用... 查看详情
sh使用grunt。(代码片段)
grunt不是内部或外部命令错误处理
...境变量问题,但是网上很多给出的方法其实是不准确的,正确方法,可以通过npmroot-g查看路径,之后将路径中具有grunt.cmd和grunt的目录添加到环境变量path中即可,其实ye并不是添加个NODE_PATH变量。 查看详情
grunt使用基础搭建(代码片段)
...目录++++build//打包输出目录-------打包生成的文件++++src//源代码开发文件目录-------add.js-------delete. 查看详情
grunt混淆代码报xmldomparser错误
项目在浏览器中可正常运行,但是Grunt混淆时报错。介绍中说是IE不支持DOMParser对象。IE中使用Document.loadXML()的XML解析。于是改为Document.loadXML方法解决。怀疑Grunt不支持DOMParser方法_Widget.xml=(function($){varxml={xmlToJson:function(xml,key){varch... 查看详情
如何使用 grunt-ngdocs 创建 api 文档
...通过grunt-ngdocs创建API文档。部分已创建,但index.html没有正确的链接。我的gruntfile.js中有:module.exports=function(grunt)grunt.initConfig(pk 查看详情
从家庭网络上的 grunt Web 服务器限制 http:// 连接到远程托管 Web 服务器的正确 CORS 条目是啥?
...络上的gruntWeb服务器限制http://连接到远程托管Web服务器的正确CORS条目是啥?【英文标题】:WhatisthecorrectCORSentryforlimitinganhttp://connectiontoaremote,hostedwebserverfromagruntwebserveronahomenetwork?从家庭网络上的gruntWeb服务器限制http://连接到远... 查看详情