利用grunt来提升web运行速度.pptxVIP

利用grunt来提升web运行速度 -朱心欲问题和选择问题（影响网站速度的原因还很多）CSS未曾压缩，合并Js未曾压缩，合并Html 未曾压缩图片 未曾压缩选择Grunt，这个和我在java中的Ant有些类似，基于任务对于需要重复执行的任务,如压缩、编译、单元测试等，grunt都可以做 生态圈足够强大，还有很多可以思考的空间。Grunt 安装说明Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。所以nodejs是使用grunt的前提安装nodejs,请至：/// 官网下载安装Grunt客户端：npm install -g grunt-cli 这里的-g使其全局可用安装 Grunt: npm install grunt --save-dev （这个在具体的web工作目录执行）提前观看构建前后项目代码—体验规划web下原本直接是html,css页面，为了后面可以区分哪些是源文件，哪些是进行grunt压缩等处理后的文件，所以用src目录进行了一次包装使用grunt后web/node_modules/grunt: 项目安装的grunt目录web/node_modules/grunt-contrib-xxx: 项目安装的grunt插件目录web/src 目录放置的是源文件web/output 是经过grunt处理过后的文件，发布生产可以用output目录中的文件Gruntfile.js 是用来定义grunt任务和加载插件的package.json 是被npm用来存储项目元素据，也可以后续将项目发布为npm模块未使用grunt前1. 为工程添加node npm管理进入web目录，执行 npm init这时需要根据提示输入信息，最后生成package.json配置文件此配置文件描述了被npm用来存储项目元素据2. 添加grunt运行环境执行命令npm install grunt –save-dev, 这时会下载node的grunt运行环境包 node_modules\gruntGruntfile一般由四个部分组成：包装函数 module.exports = function (grunt) { //编写代码 }2. 项目/任务配置grunt.initConfig({ pkg: grunt.file.readJSON(package.json), //清除目录 clean: { all: [output/] }, // 配置压缩js uglify: { build: { files: [{ expand:true, cwd:src/js,//js目录下 src:**/*.js,//所有js文件 dest: output/js//输出到此目录下 }] }, //… }3. 根据需要加载任务 grunt.loadNpmTasks(grunt-contrib-clean); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-htmlmin); grunt.loadNpmTasks(grunt-contrib-cssmin); grunt.loadNpmTasks(grunt-contrib-copy);4. 执行任务 grunt.registerTask(default, [clean,uglify,htmlmin,cssmin,copy])3.添加Gruntfile.js定义grunt任务和加载插件 根据当前项目选择插件：clean – 构建前清空output目录uglify –压缩js文件htmlmin –压缩html文件cssmin –压缩css文件 编写Gruntfile.js文件(右边) 通过cmd控制台进入web目录执行grunt命令我的Gruntfile.js文件想直接使用，请修改文件的后缀名 txt --- js4. 必要时下载插件，再次执行grunt目前下载web目录，并直接通过执行grunt命令后，grunt会清空output，然后执行压缩等功能。这是因为，我们需要的grunt插件已经下载到我们的[web/node_modules/grunt-contrib-xxx: ]目录。如果我们在新建项目直接执行的时候，提示缺失插件，可以通过npm install 插件名称 –save-dev 的方式将插件下载到本地ps： --save-dev 选项可以帮我们把我们已经下载的grunt及插件配置到package.json中，最后我们的package.json的内容如下：最后说明1. 进入生产或是测试环节的时候， 直接使用outp