npm文档:www.npmjs.com

grunt基础教程:http://www.gruntjs.net/docs/getting-started/

  http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
  http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html
package配置文件
  http://blog.csdn.net/woxueliuyun/article/details/39294375

    npm install grunt@0.4.5 --save-dev//安装grunt
    npm install -g grunt-cli//全局执行cli
    npm install
    grunt --version//检测

grunt执行子任务:

grunt.initConfig({
concat: {
js:{},
css:{}
}
})

以上代码,只执行合并css,可以 grunt concat:css

一、需求

1.执行grunt——默认合并压缩js和css
2.执行grunt js——合并压缩js
3.执行grunt css——合并压缩css

二、依赖插件

1.js压缩:uglify    https://github.com/gruntjs/grunt-contrib-uglify

三、代码

[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']);//默认
grunt.registerTask('js', ['concat:js','uglify']);
grunt.registerTask('css', ['concat:css','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"
}
}

grunt自定义任务——合并压缩css和js的更多相关文章

  1. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  2. uglifyjs 合并压缩 js, clean-css 合并压缩css

    本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...

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

    JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...

  4. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  5. 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS

    在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩 ...

  6. gulp压缩css和js

    压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...

  7. Maven使用yuicompressor-maven-plugin打包压缩css、js文件

    最近项目想使用在maven打包的时间压缩js,css文件,采用yuicompressor-maven-plugin插件进行压缩,但只是压缩减小大小,提高请求速度,并没有对js进行混淆.下面就写一下这个 ...

  8. 压缩css与js

    使用yuicompressor 进行css和js的压缩 #! /bin/sh yasuocss="java -jar /root/yuicompressor-2.4.8.jar --type ...

  9. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

随机推荐

  1. C# Web应用调试开启外部访问

    在用C#开发Web应用时有个痛点,就是本机用VS开启Web应用调试时外部机器无法访问此Web应用.这里将会介绍如何通过设置允许局域网和外网机器访问本机的Web应用. 目录 1. 设置内网访问 2. 设 ...

  2. [C#] async 的三大返回类型

    async 的三大返回类型 序 博主简单数了下自己发布过的异步文章,已经断断续续 8 篇了,这次我想以 async 的返回类型为例,单独谈谈. 异步方法具有三个可让开发人员选择的返回类型:Task&l ...

  3. SQL Server镜像自动生成脚本

    SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...

  4. .NET 串口通信

    这段时间做了一个和硬件设备通信的小项目,涉及到扫描头.输送线.称重机.贴标机等硬件.和各设备之间通信使用的是串口或网络(Socket)的方式.扫描头和贴标机使用的网络通信,输送线和称重机使用的是串口通 ...

  5. .Net中的AOP系列之构建一个汽车租赁应用

    返回<.Net中的AOP>系列学习总目录 本篇目录 开始一个新项目 没有AOP的生活 变更的代价 使用AOP重构 本系列的源码本人已托管于Coding上:点击查看. 本系列的实验环境:VS ...

  6. 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录

    ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...

  7. Entity Framework 6 Recipes 2nd Edition 译 -> 目录 -持续更新

    因为看了<Entity Framework 6 Recipes 2nd Edition>这本书前面8章的翻译,感谢china_fucan. 从第九章开始,我是边看边译的,没有通读,加之英语 ...

  8. C++ std::set

    std::set template < class T, // set::key_type/value_type class Compare = less<T>, // set::k ...

  9. CSS 3学习——box-sizing和背景

    box-sizing 在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高,元素实际的尺寸是margin + border + padding + 内容区. CSS 3(截止 ...

  10. background例子