压缩前的工程目录:

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. 使用vs自带的性能诊断工具

    visual studio是个强大的集成开发环境,内置了程序性能诊断工具.下面通过两段代码进行介绍. static void Main( string[] args) { Test1(); Test2 ...

  2. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  3. android: 实现跨程序数据共享

    简单起见,我们还是在上一章中 DatabaseTest 项目的基础上继续开发,通过内容提供器 来给它加入外部访问接口. 打开 DatabaseTest 项目,首先将 MyDatabaseHelper ...

  4. UIScrollView offset in UINavigationController

    转:UIScrollView offset in UINavigationController 通过设置viewCtronller的 self.automaticallyAdjustsScrollVi ...

  5. phpweb成品网站最新版(注入、上传、写shell)

    注入:之所以鸡肋就是该漏洞利用安装文件 重新生成 配置文件 写入可执行代码 鸡肋1: 具有破坏性 动作非常大 重新写了配置文件 数据库连接文件鸡肋2: 有一定安全常识的站长都会删掉 install 目 ...

  6. Sicily 3913. 阶乘之和

    http://soj.me/3913 一开始被它的数据吓到了,还以为很复杂,但想清楚之后,确实是比较简单的,你只需要算到 24! 就行了,大于 24 的时候答案永远是 940313,因为我们是对 10 ...

  7. 使用Dezender对zend加密后的php文件进行解密

    在开发中需要修改一些php文件,部分是通过zend加密的,记事本打开之后是这样的: 此时需要使用Dezender进行解密,下载链接如下: Dezender.7z 下载后解压到C盘(路径不要带有中文), ...

  8. Mac OSX - 如何在bash_profile中配置全局环境变量

    我们知道,在Linux操作系统下,配置环境变量是使用如下命令: vim /etc/profile 在OSX下,我们用如下命令打开环境变量配置文件: open ~/.bash_profile 典型的环境 ...

  9. OpenSSL命令---pkcs7

    用途: 用于处理DER或者PEM格式的pkcs#7文件. 用法: openssl pkcs7 [-inform PEM|DER] [-outform PEM|DER] [-in filename] [ ...

  10. 用etckeeper来解救运维工程师

    对于运维工程师来讲,etc环境是一个痛点,各种配置,各种修改,某些软件的配置关联因素过多的话,那就更加痛苦了,改完发现不对再想改回去都千难万难, 现在有一个好的解决方案,那就是用etckeeper,绝 ...