使用grunt合并压缩js和css文件的方法


Posted in Javascript onMarch 02, 2017

需要了解的知识:

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
  stack.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.package.json文件

{
 "name": "demo",
 "file": "zepto",
 "version": "0.1.0",
 "description": "demo",
 "license": "MIT",
 "devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.5.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"
 }
}

 2.Gruntfile.js

module.exports = function (grunt) {
 grunt.initConfig({
 concat: {
  options: {
  },
  dist: {
   src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件
   dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
  }
 },
 uglify: {
   build: {
    src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件
    dest: 'dist/built.min.js'//压缩文件为built.min.js
   }
  }
});
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','uglify']);
}

执行步骤:

(1)安装依赖,已安装可以忽略: npm install 。将会下载依赖的文件到node_modules目录。

(2)执行合并压缩: grunt

>grunt
Running "concat:dist" (concat) task
File dist/built.js created.
Running "uglify:build" (uglify) task
File "dist/built.min.js" created.
Done, without errors.

将会在dist目录生成

built.js
built.min.js

任务2:将src/css目录下的所有css文件合并,并压缩。

二、对CSS进行合并压缩

需要安装grunt-css。执行 npm install grunt-css 安装。安装成功,下载到 node_modules/grunt-css 。如果已经安装,可以忽略。

1、package.json同上;

2、Gruntfile.js如下:

module.exports = function (grunt) {
 grunt.initConfig({
 concat: {//css文件合并
  css: {
   src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
   dest: 'dist/all.css' //生成到grunt项目路径下的dist文件夹下为all.css
  }
 },
 cssmin: { //css文件压缩
   css: {
    src: 'dist/all.css',//将之前的all.css
    dest: 'dist/all.min.css' //压缩
   }
  }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','cssmin']);
}

参考:

1、 Grunt中文网

http://www.gruntjs.net/getting-started

以上所述是小编给大家介绍的使用grunt合并压缩js和css文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
js事件触发操作实例分析
Jun 21 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 #Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 #Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 #Javascript
You might like
php 文件上传系统手记
2009/10/26 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue地区选择组件教程详解
2018/05/04 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
浅析Python多线程下的变量问题
2015/04/28 Python
深入理解python对json的操作总结
2017/01/05 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
详解Python 函数如何重载?
2019/04/23 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
出纳岗位职责范本
2013/12/01 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python