grunt——合并压缩css和js

npm文档:www.npmjs.com

[GruntFile.js]

module.exports = function(grunt) {
    grunt.initConfig({
        timestamp:‘<%= grunt.template.today("yyyymmddHHMM") %>‘,
        jspath:‘app/js/‘,
        csspath:‘app/css/‘,
        concat: {
            js:{
                options: {
                    separator: ‘;‘
                },
                src: [
                    "<%= jspath %>template.js",
                    "<%= jspath %>returnCode.js",
                ],
                dest: ‘<%= jspath %>all.<%= timestamp %>.js‘
            },
            css:{
                src: [
                    ‘<%= csspath %>manage.css‘,
                    ‘<%= csspath %>jqpagination.css‘
                ],
                dest: ‘<%= csspath %>all.<%= timestamp %>.css‘
            }
        },
        uglify: {
            options: {
                banner: ‘/*! <%= concat.js.dest %> */\n‘
            },
            dist: {
                files: {
                    ‘<%= jspath %>all.min.<%= timestamp %>.js‘: [‘<%= concat.js.dest %>‘]
                }
            }
        },
        cssmin: {
            minify: {
                expand: true,
                cwd: ‘<%= csspath %>‘,
                src: ‘all.<%= timestamp %>.css‘,
                dest: ‘<%= csspath %>‘,
                ext: ‘.min.<%= timestamp %>.css‘
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.registerTask(‘default‘, [‘concat‘,‘uglify‘,‘cssmin‘]);

};

[pakeage.json]

{
  "name": "test",
  "author": "youryida",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-cssmin": "latest"
  }
}
时间: 2024-10-05 06:16:36

grunt——合并压缩css和js的相关文章

合并压缩css和Js的方式

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/74/] 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度. 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.

grunt打包压缩css、js方法

1.安装nodejs,如已安装请忽略 2.安装grunt,npm install grunt 3.配置package.json和gruntfile.js文件,详解请见 想合并整个文件夹的文件请安装grunt-contrib-concat, 想压缩某个文件请安装grunt-contrib-cssmin http://learningtogrow.blog.51cto.com/3076238/1909487 http://learningtogrow.blog.51cto.com/3076238/1

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽

在项目生成时就合并压缩你的js

对网站优化来讲,合并压缩js.css等静态内容是必修课之一,一则可以节省宽带:二则可以减少http请求:三则加快了网站的访问速度 对于如何实现合并压缩js 方案一: 继承IHttpModule ,对http进行拦截,然后获取其<script src=*> tag,将js文件取出来合并成为一个资源文件 方案二:如果你用的web解决方案为 asp.net mvc 4,那么当然可以用Bundle技术. 方案三:不依赖任何服务器技术,本地先合并压缩好后再上传 本文着重讲解方案三 要合并文件,可以用do

maven 关于构建版本号,以及在构建的时候压缩css,js并为这些文件追加版本号

最近负责公司一个项目框架的搭建,由于我们这边是后端团队,没有专业的前端工程师支持我们,我就在这个搭建过程中遇到了一些前端问题,给大家分享一下. 主要分享点: 构建项目时自动在css,js文件名中加入版本号     解决新上线版本时,浏览器可以更新缓存 构建项目自动压缩css,js资源文件     加快响应速度 解决第一个问题,是在构建的时候必须生成一个构建版本号,比如构建时刻的timestamp,正好在网上看到这样的插件,配置信息如下 <plugin> <groupId>org.c

grunt 合并压缩js和css文件(二)

具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modules/ src/ Gruntfile.js package.json package.json是依赖库文件 Gruntfile.js是执行步骤程序 一.js合并压缩 第一次需要先安装grunt.执行 npm install -g grunt-cli 进行安装.如果已经安装,可以忽略. 1.pack

使用grunt合并压缩js、css文件

需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js

vs合并压缩css,js插件——Bundler &amp; Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,

grunt 合并压缩任务

module.exports = function(grunt) { // LiveReload的默认端口号,你也可以改成你想要的端口号 var lrPort = 35729; // 使用connect-livereload模块,生成一个与LiveReload脚本 // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></scri