转载文章:
http://www.cnblogs.com/yexiaochai/p/3594561.html
http://www.cnblogs.com/yexiaochai/p/3602002.html
http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html
http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html
以上两个牛人的文章写得已经很棒了,我只奉上我的文件,package.json和Gruntfile.js
对js文件进行压缩并且合并操作
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']); }
对CSS进行合并压缩
如有没有下载cssmin的话,需要下载
在nodejs命令行中输入 npm install grunt-css
等待下载即可
package.json如上
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']); }
相关推荐
利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学
grunt压缩、合并js/css
任务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 ...
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
如何将多个js文件合并压缩为一个js文件为什么要合并、压缩你的JS文件?在开始之前,先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了。HTML里...
我在做混淆的时候,先要检测一下css、js文件语法的正确性,然后在合并、压缩、混淆;在混淆的过程,js文件出现了问题,Directive,Config,Factory混淆会出问题,运行不出来,我现在也没有解决;如果是原生的js代码...
grunt前端自动化部署,在线压缩合并js、css、images和html 前几天分享了,然后并简单录制了一个小视频,之后不少朋友QQ留言,问有没有grunt深入地视频教程。哈哈,说实话,上次录制的视频很差,我是随便录制的,没有...
grunt项目构建样例,实现js文件css文件等的压缩和合并
用Grunt搭建的一个简单的web前端自动化项目,支持js代码静态扫描、js/css文件合并、压缩、js文件监控等。
自动化构建工具Grunt_压缩js任务.avi ├─05.自动化构建工具Grunt_默认任务,任务高效说明.avi ├─06.自动化构建工具Grunt_任务执行同步说明.avi ├─07.自动化构建工具Grunt_js语法检查.avi ├─09.自动化构建工具...
js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们。这篇只关注asset目录,asset目录下放了一些图片和css文件。一会会把两个css资源reset.css和style.css合并,压缩到dest/asset目录。一个合并版本...
若需要多张雪碧图,则自建子文件夹,一个子文件夹对应一张雪碧图,子文件名为雪碧图名(注意,需要替换雪碧图的css文件,切片使用background-image属性来引入,不使用background属性引入。) ejs模板片段放在src/...
'css_import', 'cssmin', css合并压缩 'filerev', 加md5 'usemin' 替换html中的引用 html中格式注意 要打包成md5的链接用如下注释包裹 <link rel="stylesheet" href=...
CSS JS 合并压缩 SCSS编译 实时监听文件变动并自动刷新浏览器 打开一个本地Server,以供测试 使用脚本自动安装运行 ###使用步骤 确保你已经安装NodeJS&Grunt(安装Grunt: npm install grunt-cli) 使用最底部的一键...
构建是一个和宽泛的表述,传统理解就是编译、打包、复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass、less预处理成css,css和js的压缩和合并。grunt的插件可以很好的支持这些新的构建概念...
ray-grunt-template一个基于 及其多个插件的Web前端开发项目初始化模板,切图好帮手。...特性CSS使用Less写样式,然后使用grunt-contrib-less来进行编译、合并使用grunt-contrib-cssmin来进行压缩(或者直接使用grun
关于长颈鹿功能目录的初始构建编译CoffeeScript 编译Sass 合并和压缩CSS文件用jsHint检查通过cssLint检查CSS重复属性检查删除不必要CSS前缀使用este-watch监视文件更新→自动化的编译,合并,压缩和调试浏览器自动...
合并和压缩 css / js 文件 用 jsHint 检查 通过 cssLint 检查 css重复属性检查 删除不必要的css前缀 使用 este-watch 监控文件更新 → 编译、合并、压缩和调试的自动化 浏览器自动重新加载 获取jQuery(可指定版本...
添加了 Grunt 来合并和最小 js、css 文件 更改了链接以包含最小文件 删除了字体真棒字体链接 通过在 pixelmater 中打开它并将其大小更改为 100 X 75 来优化大型比萨饼店。 通过 ImageOptim.app 运行图像以缩小其...