使用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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
JS轮播图的实现方法2
Aug 25 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 命令行参数详解及应用
2011/05/18 PHP
php的curl封装类用法实例
2014/11/07 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python编写一个闹钟功能
2017/07/11 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
给全校老师的建议书
2014/03/13 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
教师批评与自我批评
2014/10/15 职场文书
刑事附带民事代理词
2015/05/25 职场文书
六年级作文之自救
2019/12/19 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL