这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了使用 grunt 合并压缩 js 和 CSS 文件的方法, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
需要了解的知识:
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 文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0530/327124.html