`
xiaomiya
  • 浏览: 131505 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

grunt 单独压缩多个js和css文件

阅读更多

使用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']);

};

 

这个里面主要对jscss进行批量压缩

会依赖grunt-contrib-uglifygrunt-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回车

看到输出的内容就知道OKOK

运行OK后,我们的目录里面多了一个文件dest里面的有cssjs文件都是多个文件单独的压缩

 

这就省了我们手动去逐一压缩的苦恼了。

对于grunt是如何工作的深入理解就可以看grunt官网了

 

http://www.gruntjs.org/docs/getting-started.html本人看的是中文网站

0
3
分享到:
评论

相关推荐

    js css文件合并工具

    这个工具的主要目标是将多个JavaScript(js)和Cascading Style Sheets(css)文件整合成单个文件,以此减少网页加载时的HTTP请求次数,从而提高页面的加载速度。 JavaScript和CSS文件的合并是前端性能优化的一个...

    Grunt的Bower组件连接器_JavaScript_CSS_下载.zip

    `grunt-bower-concat`是Grunt(一个JavaScript任务运行器)的一个插件,它自动化了将Bower安装的组件整合到一起的过程,包括JavaScript文件和CSS文件。这个插件可以极大地提高开发效率,减少页面加载时间,因为它...

    grunt学习资料

    大多数任务都是通过安装和配置相应的插件来实现的,如`grunt-contrib-concat`用于文件合并,`grunt-contrib-uglify`用于JavaScript压缩。 - **配置文件(Gruntfile.js)**:Grunt 的所有任务和插件配置都在这个文件...

    前端开源库-grunt-config

    你可以根据需要创建更多的配置文件,例如`jsconfig.json`、`cssconfig.json`等,分别用于存放JavaScript和CSS相关的任务配置。 ### 4. 分离任务配置 在`grunt/config`目录下,我们可以创建如下结构: - jsconfig....

    build:加入并缩小 JS、CSS 文件

    "build:加入并缩小 JS、CSS 文件"这个标题指的是在项目构建过程中,将JavaScript(JS)和样式表(CSS)文件进行合并与压缩,以减少网络请求次数并减小文件大小,从而提高页面加载速度。下面我们将详细探讨这个过程。...

    grunt-task-running:进阶挑战

    Grunt是一个基于任务的JavaScript项目构建工具,它通过配置文件`Gruntfile.js`来定义一系列任务,这些任务可以包括源代码的编译、测试、压缩、清理等。安装Grunt首先需要全局安装Node.js,然后使用npm(Node包管理器...

    TM-0272_企业网站网页源码欧美整站模板.zip

    这个模板可能包括了首页、关于我们、产品展示、新闻动态、联系我们等多个常规页面,以及相应的CSS样式表、JavaScript脚本、图片和其他媒体资源。 【前端源码】是指用于构建网站用户界面的所有代码,主要包括HTML、...

    前端开源库-happngin-assets

    它简化了JavaScript、CSS和Angular模板的打包过程,提高了开发效率,优化了前端应用的性能。如果你正在进行前端开发,happngin-assets绝对是一个值得考虑的工具,它可以帮助你构建更快、更高效的Web应用。

    webpack.doc

    插件是Webpack构建流程中的扩展,它们在构建过程中执行更复杂的任务,例如提取CSS到单独文件、压缩代码、处理图片等。插件可以全局作用于整个构建过程,而加载器则更专注于单一任务。 Webpack 能够根据入口文件...

    Laravel开发-asset

    Laravel 4的Elixir扩展(需单独安装Gulp或Grunt)可以方便地合并和压缩CSS与JS文件,提高页面加载速度。例如,创建一个Gulp任务来合并和压缩`app.css`和`bootstrap.css`: ```javascript elixir(function(mix) { ...

    前端开源库-bundl-pack-less.zip

    - **模块合并**:Webpack根据模块依赖关系,将所有CSS模块合并成一个或多个文件。 - **压缩和优化**:可以使用cssnano等插件对CSS进行压缩和进一步优化,减少文件大小。 - **静态资源输出**:最终的CSS文件会被...

    851_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在这个项目中,可能会有多个CSS文件,包括主样式表(通常命名为style.css)和其他分模块的样式表。CSS3引入了新的选择器、动画、过渡和3D变换等功能,可以实现复杂的页面布局和动态效果。 3. JavaScript脚本:...

    Modules05. Webpack.pdf_前端学习资料

    3. **ExtractTextWebpackPlugin**:将 CSS 从 JavaScript 中提取出来,生成单独的 CSS 文件。 4. **UglifyJsWebpackPlugin**:用于代码压缩,减少文件大小。 5. **Code Splitting**:通过 `require.ensure` 或动态...

    前端开源库-html-packer

    4. **可配置性**:用户可以根据需求自定义配置,比如设置是否保留注释、是否压缩CSS和JavaScript等。 5. **易用性**:提供命令行接口(CLI)和API,方便开发者集成到构建流程中。 **使用html-packer的步骤:** 1. ...

    grunt-mogrify:用于替换和转换文本的繁重任务,主要用于源代码

    1. **文本替换**:通过正则表达式匹配和替换,可以快速地找到并替换源代码中的特定字符串或模式,这对于在多个文件中统一修改变量名、版本号等非常有用。 2. **转换功能**:能够将源代码中的某种语法结构转换为另一...

    ueditor1_4_3

    UEditor是一款强大的在线富文本编辑器,广泛应用于网页内容编辑、论坛发帖、博客写作等多个场景。它提供了一整套完善的文本编辑功能,包括文字格式化、图片上传、视频插入、表格操作等,使得用户在网页上可以像使用...

    eka-web.rar

    "eka-web.rar" 是一个压缩包文件,通常用于存储多个相关文件或文件夹,以便于传输和存储。从标签 "eka-web.rar 334" 我们可以推测,这可能是一个与Web相关的项目,而“334”可能是项目的版本号、文件数量或者某种...

    grunt-angular-builder-ocLazyload:Angular 项目模板

    2. **Grunt配置**:项目根目录下的`Gruntfile.js`是Grunt的核心配置文件,其中定义了各种任务,如`concat`(合并文件)、`uglify`(压缩JavaScript)、`copy`(复制文件)等,这些任务会根据应用的需求进行定制。...

    手机wrap网站七彩性触屏版html5响应式手机app网站模板

    这不仅提升了用户体验,也使得维护成本降低,因为无需为不同的设备单独开发多个版本的网站。 ### 二、触屏版HTML5网站模板 #### 触屏版网站的意义 随着移动设备的普及,越来越多的用户倾向于使用智能手机和平板...

    OBLOG 泛黄记忆

    在这个压缩包中,我们没有具体的文件内容信息,但可以推测其中可能包含了一系列用于构建网站的HTML、CSS、JavaScript和其他相关资源文件。现在,我们将深入探讨网页模板以及与之相关的技术知识点。 网页模板是预先...

Global site tag (gtag.js) - Google Analytics