使用grunt来压缩前端js,css文件
因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩。用grunt压缩已经不是什么新鲜事了,,之前的项目用的是别人给我配置好的。所以也没有去深究。这次类型不同了不需要去上传只需文件压缩。所以下午自己去研究了下grunt确实很好用。
我们这里需要对js和css单独压缩。网上很多都是合并压缩。本人觉得多个js合并之后会存在隐形问题。还是喜欢单独压缩。下面的介绍就只做多个文件单独压缩。
一,什么是grunt,
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
① 压缩文件
② 合并文件
③ 简单语法检查
对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件
二,准备阶段
1,nodejs环境
因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境
安装nodejs。
安装好之后检查
打开cmd
输入:node -v
输出:v0.10.28(这个是我的版本)
三,安装grunt
有了nodeJs环境后,我们便可以开始搞grunt了,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI
官方推荐在全局安装CLI(grunt的命令行接口)
输入:npm install -g grunt-cli
这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,原因是
每次运行grunt时,它都会使用node的require查找本地是否安装grunt,如果找到CLI便加载这个本地grunt库
然后应用我们项目中的GruntFile配置,并执行任务
ps这里安装好后一般在我们的C:\Users\SOS\AppData\Roaming\npm\node_modules
会看到grunt-cli文件
四,添加package.json和Gruntfile.js文件
package.json
代码如下:
{ "name": "test", "version": "0.1.0", "description": "test", "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" } }
Gruntfile.js
代码如下:
module.exports = function (grunt) { // 构建任务配置 grunt.initConfig({ //读取package.json的内容,形成个json数据 pkg: grunt.file.readJSON('package.json'), //压缩js uglify: { //文件头部输出信息 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, my_target: { files: [ { expand: true, //相对路径 cwd: 'js/', src: '*.js', dest: 'dest/js/', rename: function (dest, src) { var folder = src.substring(0, src.lastIndexOf('/')); var filename = src.substring(src.lastIndexOf('/'), src.length); // var filename=src; filename = filename.substring(0, filename.lastIndexOf('.')); var fileresult=dest + folder + filename + '.min.js'; grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult); return fileresult; //return filename + '.min.js'; } } ] } }, //压缩css cssmin: { //文件头部输出信息 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', //美化代码 beautify: { //中文ascii化,非常有用!防止中文乱码的神配置 ascii_only: true } }, my_target: { files: [ { expand: true, //相对路径 cwd: 'css/', src: '*.css', dest: 'dest/css/', rename: function (dest, src) { var folder = src.substring(0, src.lastIndexOf('/')); var filename = src.substring(src.lastIndexOf('/'), src.length); // var filename=src; filename = filename.substring(0, filename.lastIndexOf('.')); var fileresult=dest + folder + filename + '.min.css'; grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult); return fileresult; //return filename + '.min.js'; } } ] } } }); // 加载指定插件任务 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 默认执行的任务 grunt.registerTask('default', ['uglify', 'cssmin']); };
这个里面主要对js和css进行批量压缩
会依赖grunt-contrib-uglify和 grunt-contrib-cssmin这两个插件
做好后,我们需要在我们的项目的根目录下运行命令
输入:npm install
会将相关的文件下载下来
这个时候我们的根目录下就会多个文件名字叫node_modules
这一步我们就可以压缩
进入根目录输入命令grunt回车就ok
这个时候如果输出有报错可能说:“grunt-contrib-cssmin”notfound
那我们要把 grunt-contrib-cssmin插件下载下来
输入命令:npm install grunt-contrib-cssmin
OK
这个时候如果输出有报错可能说:Fatal error :Unable to find local grunt
或者找不到grunt的错误
那我们可以重新安装grunt
把C:\Users\SOS\AppData\Roaming\npm\node_modules下面的grunt-cli文件删除。。重新执行
npm install -g grunt-cli
那么最后我们就只用输入grunt回车
看到输出的内容就知道OK不OK了
运行OK后,我们的目录里面多了一个文件dest里面的有css和js文件都是多个文件单独的压缩
这就省了我们手动去逐一压缩的苦恼了。
对于grunt是如何工作的深入理解就可以看grunt官网了
相关推荐
grunt压缩、合并js/css
混合开发:node grunt混淆压缩 android中的angularjsionic 文件;在做android混合开发,web部分中的文件时...所以这里主要的是合并、压缩、混淆有关的css,js原生和Controller文件;如果更好的混淆方法,欢迎留言交流;
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学
3、grunt的初步了解 本文已假定读者已经熟悉以上知识。 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩。 --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event....
grunt-css-injector 这个插件解析 css/scss/sass 文件,找到所有 @import 指令并注入这些文件。入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。...
加载一个文件消耗的时间可以忽略不计,问题是你显示一个复杂的网页可能会加载N多文件,那我们在我们可以控制的范围内,能少花点时间就少花点呗。用户可是对网页加载的速度很挑剔的!对JS,一般就会将本地的所有用到...
grunt-jsbeautifier, 使用Grunt和https美化 js css html和json文件 jsbeautifier jsbeautifier.org 用于 grunt正在启动这个插件推荐使用 Grunt ~0.4.1 。 Grunt ~0.3.0 只有 suported,直到 0.1.4版本。If之前,请务
利用Nodejs编写的grunt压缩程序,可压缩图片、css、js
优化html的js和css脚本,此工具的原理是合并html文件中的指定需要合并的文件并替换合并后的文件,新生成的文件以内容md5码进行命名,如果合并之后的内容发生变化,则文件名同样会发生变化,这样是为了控制浏览器加载...
grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
一个使用 YUI Compressor 压缩 JavaScript 和 CSS 文件的插件。 入门 安装模块: npm install grunt-yui-compressor 然后将此行添加到您项目的grunt.js gruntfile 中: grunt . loadNpmTasks ( 'grunt-yui-...
GruntForWeb一个基于grunt的web前端自动化项目模板(和yoman类似,但不可定制), 包含常用功能(less编译, js,css压缩, 项目文件夹导出, 代码规范检查,等等)Gruntfile.js 结构watch -- 监视html,js,css文件改变,执行对应...
grunt-phantomcss, 使用PhantomCSS进行CSS回归测试的grunt任务 phantomcss使用PhantomCSS自动化CSS回归测试正在启动这个插件需要 Grunt ~0.4.1If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt...
grunt项目构建样例,实现js文件css文件等的压缩和合并
特征压缩和解压支持通过router选项按文件重命名/路由通过router选项跳过文件提取过程中保留UNIX文件权限入门grunt-zip可以通过安装NPM: npm install grunt-zip grunt-zip提供2个grunt任务: zip unzip压缩将文件...
运行 (一个 CSS 冗余分析器)的 Grunt 任务。 CSSCSS CSSCSS 在 Ruby( v1.9.x及更高版本)上运行,要检查 Ruby 是否安装在您的机器上,请使用ruby -v 。 要安装 CSSCSS gem,请运行gem install csscss...
入门 ...在项目的Gruntfile中,向传递给grunt.initConfig()的数据对象添加一个名为css_to_js的部分。 grunt . initConfig ( { css_to_js : { options : { // Task-specific options go here. } ,
grunt-ez-frontend 轻松定义css,要解析,连接,自动前缀和缩小的文件更少,以及将被串联和缩小的js文件。 主要任务是ez-frontend,这是一个多任务,可以轻松配置哪些文件将生成哪个输出。 基于以下约定: 一组较少...