压缩前的工程目录:

1、安装js,css需要的插件

使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件

npm install grunt-contrib-cssmin --save-dev  -------->安装css压缩插件

手动安装后,在package.json文件里,会自动将“grunt-contrib-uglify”加入,并且是当前grunt-contrib-uglify的最新版本,就如下面的package.json文件中红色部分,

“grunt-contrib-cssmin”与上同理。

或者在package.json中加入配置:

{
"name": "DailyBook",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.1",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.2",
"express": "~4.13.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
},
"main": "app.js",
"author": "",
"license": "ISC"
}

然后npm install。

2、创建gruntfile.js文件,配置grunt:

 module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
//读取package.json文件,形成json数据;
pkg: grunt.file.readJSON('package.json'),
//压缩js;
uglify: {
//压缩后的文件中头部的输出信息,options可有可无;
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//当只有一个文件需要压缩时,可按下列方式书写代码
// build: {
// src: 'src/<%=pkg.file %>.js',
// dest: 'dest/<%= pkg.file %>.min.js'
// }
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.js",//相对路径下需要压缩的文件,*表示所有该后缀类型的文件,写具体的就是某个具体的文件将会被压缩
dest:"dest/js"//压缩后的文件需要放置的目录,如果不存在的话,会自动创建
}
]
}
/************如果是几个特定的文件需要压缩,写法如下*********/
/*
my_target:{
files:[
{
expand:true,//相对路径
cwd:"src/",
src:'test.js',
dest:"dest/js"
},
{
expand:true,//相对路径
cwd:"src/",
src:'zepto.js',
dest:"dest/js"
}
]
} */
},
//压缩css
cssmin:{
options:{
//压缩后css文件的头部信息,options可有可无
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
ascii_only:true//中文ascii美化,防止中文乱码
},
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.css",//相对路径下需要压缩的文件,*表示所有该后缀类型的文件,写具体的就是某个具体的文件将会被压缩
dest:"dest/css"//压缩后的文件需要放置的目录,如果不存在的话,会自动创建
}
]
} }
});
// 加载指定的插件
grunt.loadNpmTasks('grunt-contrib-uglify');// 压缩js文件;
grunt.loadNpmTasks('grunt-contrib-cssmin');//压缩css文件; // 默认要执行的任务
grunt.registerTask('default', ['uglify','cssmin']);
}

3、输入命令 grunt 运行。结果将文件自动压缩并生成相应的文件目录:

压缩后的工程目录:

grunt压缩多个js文件和css文件的更多相关文章

  1. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  2. 关于controller返回的页面js文件和css文件404问题的正式解决

    谨用此博客记录一下这条卡了两个星期的bug…… 还是之前的问题,通过get方法,后台@Controller返回页面然后弹窗.但是不知道为什么一直所有js文件和css文件都报404…… (之前的博客记录 ...

  3. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  4. 利用nodeJs来安装less以及编译less文件为css文件

    NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqY ...

  5. 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

    很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...

  6. 在HTML页面中加载js文件和css文件的方法

    1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...

  7. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  8. Grunt压缩图片和JS

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  9. vue.js 独立引用css文件图片路径错误

    vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...

随机推荐

  1. java集合类总结二

    上篇已经总结了常用集合类的一些基本特征以及他们之间的区别,下面,再对集合类部分进行总结 一.集合类的常用方法 1.remove方法:移除元素操作,下面以ArrayList为例. import java ...

  2. Which Clang Warning Is Generating This Message?

    Which Clang Warning Is Generating This Message? 根据前面页面制作的pdf:clangwarninglist.pdf 百度网盘:http://pan.ba ...

  3. hdu 1385 Minimum Transport Cost (floyd算法)

    貌似···················· 这个算法深的东西还是很不熟悉!继续学习!!!! ++++++++++++++++++++++++++++ ======================== ...

  4. 在线测试 ssl 安全性

    记录下, https://www.ssllabs.com/index.html

  5. InstallShield 2012 Spring优惠升级到最新版本(2015.4.30之前)

    InstallShield 2012 Spring即将EOF,所以仍在使用InstallShield 2012 Spring的用户请注意下面内容: InstallShield 2012 Spring升 ...

  6. gpg的一些常用操作

    (1)列出keys # gpg --list-keys /root/.gnupg/pubring.gpg ------------------------ pub   2048R/98681A63 2 ...

  7. Asp.net Core 使用Redis存储Session

    前言 Asp.net Core 改变了之前的封闭,现在开源且开放,下面我们来用Redis存储Session来做一个简单的测试,或者叫做中间件(middleware). 对于Session来说褒贬不一, ...

  8. python 中偏函数 partial 的使用

    函数的partial应用 函数在执行时,要带上所有必要的参数进行调用.但是,有时参数可以在函数被调用之前提前获知.这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用. 例 ...

  9. Html5 localstorage解决Ajax回退的坑

    A页面通过ajax加载数据,并且是滚动加载效果,当滚动几个屏幕之后,进入新的链接页面B,再返回到A的时候,A页面的数据有需要重新加载,从头开始了,体验非常不好. 解决办法:1)hash:2)html5 ...

  10. LNMP软件安装所在的目录详细

    LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/var ...