使用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官网了
相关推荐
这个工具的主要目标是将多个JavaScript(js)和Cascading Style Sheets(css)文件整合成单个文件,以此减少网页加载时的HTTP请求次数,从而提高页面的加载速度。 JavaScript和CSS文件的合并是前端性能优化的一个...
`grunt-bower-concat`是Grunt(一个JavaScript任务运行器)的一个插件,它自动化了将Bower安装的组件整合到一起的过程,包括JavaScript文件和CSS文件。这个插件可以极大地提高开发效率,减少页面加载时间,因为它...
大多数任务都是通过安装和配置相应的插件来实现的,如`grunt-contrib-concat`用于文件合并,`grunt-contrib-uglify`用于JavaScript压缩。 - **配置文件(Gruntfile.js)**:Grunt 的所有任务和插件配置都在这个文件...
你可以根据需要创建更多的配置文件,例如`jsconfig.json`、`cssconfig.json`等,分别用于存放JavaScript和CSS相关的任务配置。 ### 4. 分离任务配置 在`grunt/config`目录下,我们可以创建如下结构: - jsconfig....
"build:加入并缩小 JS、CSS 文件"这个标题指的是在项目构建过程中,将JavaScript(JS)和样式表(CSS)文件进行合并与压缩,以减少网络请求次数并减小文件大小,从而提高页面加载速度。下面我们将详细探讨这个过程。...
Grunt是一个基于任务的JavaScript项目构建工具,它通过配置文件`Gruntfile.js`来定义一系列任务,这些任务可以包括源代码的编译、测试、压缩、清理等。安装Grunt首先需要全局安装Node.js,然后使用npm(Node包管理器...
这个模板可能包括了首页、关于我们、产品展示、新闻动态、联系我们等多个常规页面,以及相应的CSS样式表、JavaScript脚本、图片和其他媒体资源。 【前端源码】是指用于构建网站用户界面的所有代码,主要包括HTML、...
它简化了JavaScript、CSS和Angular模板的打包过程,提高了开发效率,优化了前端应用的性能。如果你正在进行前端开发,happngin-assets绝对是一个值得考虑的工具,它可以帮助你构建更快、更高效的Web应用。
插件是Webpack构建流程中的扩展,它们在构建过程中执行更复杂的任务,例如提取CSS到单独文件、压缩代码、处理图片等。插件可以全局作用于整个构建过程,而加载器则更专注于单一任务。 Webpack 能够根据入口文件...
Laravel 4的Elixir扩展(需单独安装Gulp或Grunt)可以方便地合并和压缩CSS与JS文件,提高页面加载速度。例如,创建一个Gulp任务来合并和压缩`app.css`和`bootstrap.css`: ```javascript elixir(function(mix) { ...
- **模块合并**:Webpack根据模块依赖关系,将所有CSS模块合并成一个或多个文件。 - **压缩和优化**:可以使用cssnano等插件对CSS进行压缩和进一步优化,减少文件大小。 - **静态资源输出**:最终的CSS文件会被...
在这个项目中,可能会有多个CSS文件,包括主样式表(通常命名为style.css)和其他分模块的样式表。CSS3引入了新的选择器、动画、过渡和3D变换等功能,可以实现复杂的页面布局和动态效果。 3. JavaScript脚本:...
3. **ExtractTextWebpackPlugin**:将 CSS 从 JavaScript 中提取出来,生成单独的 CSS 文件。 4. **UglifyJsWebpackPlugin**:用于代码压缩,减少文件大小。 5. **Code Splitting**:通过 `require.ensure` 或动态...
4. **可配置性**:用户可以根据需求自定义配置,比如设置是否保留注释、是否压缩CSS和JavaScript等。 5. **易用性**:提供命令行接口(CLI)和API,方便开发者集成到构建流程中。 **使用html-packer的步骤:** 1. ...
1. **文本替换**:通过正则表达式匹配和替换,可以快速地找到并替换源代码中的特定字符串或模式,这对于在多个文件中统一修改变量名、版本号等非常有用。 2. **转换功能**:能够将源代码中的某种语法结构转换为另一...
UEditor是一款强大的在线富文本编辑器,广泛应用于网页内容编辑、论坛发帖、博客写作等多个场景。它提供了一整套完善的文本编辑功能,包括文字格式化、图片上传、视频插入、表格操作等,使得用户在网页上可以像使用...
"eka-web.rar" 是一个压缩包文件,通常用于存储多个相关文件或文件夹,以便于传输和存储。从标签 "eka-web.rar 334" 我们可以推测,这可能是一个与Web相关的项目,而“334”可能是项目的版本号、文件数量或者某种...
2. **Grunt配置**:项目根目录下的`Gruntfile.js`是Grunt的核心配置文件,其中定义了各种任务,如`concat`(合并文件)、`uglify`(压缩JavaScript)、`copy`(复制文件)等,这些任务会根据应用的需求进行定制。...
这不仅提升了用户体验,也使得维护成本降低,因为无需为不同的设备单独开发多个版本的网站。 ### 二、触屏版HTML5网站模板 #### 触屏版网站的意义 随着移动设备的普及,越来越多的用户倾向于使用智能手机和平板...
在这个压缩包中,我们没有具体的文件内容信息,但可以推测其中可能包含了一系列用于构建网站的HTML、CSS、JavaScript和其他相关资源文件。现在,我们将深入探讨网页模板以及与之相关的技术知识点。 网页模板是预先...