2012第一弹分钟学会使用打包前端代码.docVIP

前言 以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？这些都是我们实际工作中要遇到的问题，比如我们现在框架使用zepto、backbone、underscore我们要如何将他们合成一个libs文件，这都是令人头疼的问题 但是grunt的出现却让这些事情变得优雅起来！简单一键，打包结束，尼玛不是不可能啊！ grunt 是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查 对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件 初学，有误请包涵 准备阶段 1、nodeJs环境 因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境，这块我们便不管了 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中新增以下代码（先别管，增加再说） module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON(package.json), uglify: { options: { banner: /*! %= pkg.file % %= grunt.template.today(yyyy-mm-dd) % */\n }, build: { src: src/%=pkg.file %.js, dest: dest/%= pkg.file %.min.js } } }); // 加载提供uglify任务的插件 grunt.loadNpmTasks(grunt-contrib-uglify); // 默认任务 grunt.registerTask(default, [uglify]); } 然后运行 grunt命令后 grunt 嗯嗯，多了一个文件，并且是压缩的，不差！！！第一步结束 认识Gruntdile与package.json 不出意外，每一个gurnt都会需要这两个文件，并且很可能就只有这两个文件（复杂的情况有所不同） package.json 这个文件用来存储npm模块的依赖项（比如我们的打包若是依赖requireJS的插件，这里就需要配置）然后，我们会在里面配置一些不一样的信息，比如我们上面的file，