- 浏览: 438928 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
Gruntfile.js
页面调用:
工程目录:
代码:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //源码 src: "asserts", //输出 dist: "dist", transport: { options: { paths:["<%=src%>/sea-modules"], alias: { "jquery": "lib/jquery.js" } }, modules: { files : [ { cwd: '<%=src%>/sea-modules', expand: true, src: '**/*.js', dest: '<%=dist%>/sea-modules' } ] }, dwstatic: { options:{ }, files : [ { cwd: '<%=src%>', expand: true, src: 'dwstatic/**/*.js', dest: '<%=dist%>' } ] } }, copy:{ moduleRes:{ files:[ {expand: true, cwd: '<%=src%>/sea-modules/css', src:['**'],dest: '<%=dist%>/sea-modules/css'}, {expand: true, cwd: '<%=src%>/sea-modules/img', src:['**'],dest: '<%=dist%>/sea-modules/img'} ] }, staticRes:{ files:[ {expand: true, cwd: '<%=src%>/dwstatic/css', src:['**'],dest: '<%=dist%>/dwstatic/css'}, {expand: true, cwd: '<%=src%>/dwstatic/images', src:['**'],dest: '<%=dist%>/dwstatic/images'} ] } }, concat: { //合并一个公用的基础js,并且利用 preload插件,让其前置加载。 aio: { options: { paths:["<%=dist%>/sea-modules"], include: "all" }, files: { "<%=dist%>/sea-modules/aio.js": ["<%=dist%>/sea-modules/aio.js"] } } }, uglify:{ allJs:{ files:[{ expand: true, cwd: '<%=dist%>', src: ['**/*.js', '!**/*-debug.js'], dest: '<%=dist%>' }] } }, cssmin: { allCss: { expand: true, cwd: '<%=dist%>', src: ['**/*.css'], dest: '<%=dist%>' } } }); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.registerTask('min', ['uglify','cssmin']); grunt.registerTask('default', ['transport', 'concat','copy','uglify','cssmin']); };
页面调用:
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <link type="text/css" rel="stylesheet" href="asserts/sea-modules/css/common.css" /> <script id="seajsnode" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/sea-debug.js"></script> <script type="text/javascript" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/seajs-css.js"></script> <script type="text/javascript" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/seajs-preload.js"></script> <style> pre{display:block;background:#000;color:green;padding:20px;font-weight:bold;} </style> </head> <body> <pre> npm 安装的包: npm install -g grunt-cli npm install grunt --save-dev npm install grunt-cmd-transport --save-dev npm install grunt-cmd-concat --save-dev npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-cssmin --save-dev </pre> <input id="pop" value="pop" type="button" class="greenbtn largebtn"/> <script> //静态服务器地址 var staticBase = "http://shawn.test.com:1234/www/seajsDemo/dist/"; if(location.search){ staticBase = "/www/seajsDemo/asserts/"; //使用本地资源 } seajs.config({ preload:["aio"], base: staticBase + "sea-modules/", alias: { "jquery": "lib/jquery.js" }, vars: { 'locale': 'zh-CN' //国际化支持 }, paths:{ //dwstatic开头的模块,将被重新映射到具体的资源路径。 "dwstatic" : staticBase + "dwstatic" }, map:[ [/^(.*\.(?:js|css))(.*)$/i, '$1?ver=20150615']] }); </script> <script> //【规范】:凡是dwstatic开头的资源,视为业务模块,要求放置在dwstatic目录下 seajs.use("dwstatic/index"); //seajs.use("dwstatic/index-debug") </script> </body> </html>
工程目录:
代码:
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1624:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
js平滑滚动回到顶部
2015-06-10 11:42 3949优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3908https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4248scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1696skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1671<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1156关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22529var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 69361. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1399<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11836插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3778【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1604移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 499在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 878function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1059<head> <script ... -
window.name 跨域
2015-03-18 17:29 845window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1081// 替换当前浏览器history的最后一项记录。 hi ... -
爬取网站的图片之一
2015-03-05 18:12 859var http = require('http' ...
相关推荐
基于seajs的模块化方案,配合grunt构建配置 主要用到了grunt的grunt-cmd-transport、grunt-cmd-concat、grunt-contrib-uglify、grunt-contrib-copy 这几个模块,实现模块依赖分析,模块合并,代码压缩等功能 使用...
主要是做了一个基于node环境中,seajs的配置以及一些实例和利用grunt进行资源的打包压缩合并的构建
前端开源库-grunt-react-seajsgrunt react seajs,一个将react组件转换为seajs模块的grunt插件
前端开源库-grunt-react-seajs.zip
grunt项目构建样例,实现js文件css文件等的压缩和合并
提供各类插件用于前端开发,例如JSLint代码检验,优化,concat合并文件插件,uglify压缩工具,与CMD规范(一种js模块化开发的规范提议)配合的grunt-cmd-concat,这里主要是用于配合seajs,将多个文件合并压缩 ##使用环境##...
grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
grunt-seajs-scripttag 在模板中包含[removed]标记,以便通过grunt-antrol-concat导入拆分的文件入门这个插件需要~0.4.0 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件...
自动化构建工具Grunt_实现watch监视任务实现自动打包编译.avi (2)\Gulp即学即用;目录中文件数:8个 ├─01.自动化构建工具Gulp_入门介绍.avi ├─02.自动化构建工具Gulp_构建js.avi ├─03.自动化构建工具Gulp_构建...
web-grunt-seajs 开发댔관북깻 grunt --config src/lib/config/config.js --isBeautify 建立댔관북깻箕键 grunt --config src/lib/config/config.js 测试湳驾꿎杆북깻 grunt --config src/lib/config/config.js...
grunt-drupal-tasks, 面向Drupal的Grunt构建和测试任务 Grunt Drupal任务用于自动化 Drupal 7和 Drupal 8构建和测试任务的Grunt插件。代码状态( 主分支): 特性这个项目构建在Grunt社区的工具之上,提供了许多 PHP &...
Advantage: 优点: Easy to debug 便于调试 Nodejs usable 可用于nodejs No XSS 避免XSS Debugging in chrome dev ...npm install grunt-ejs2seajs --save-dev Then add this line to your project's gruntfile: 添加
构建seajs模块。提取替换ID,压缩替换。 这个插件需要~0.4.5 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm ...
本压缩包是执行命令npm install grunt --save-dev,安装的文件。
使用 Grunt 构建组件。 入门 如果您以前没有使用过grunt ,请务必查看入门指南,因为它解释了如何创建Gruntfile以及安装和使用 grunt 插件。 熟悉该过程后,请使用以下命令安装此插件: npm install grunt-...
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
Yeoman PowerMvc 生成器PowerMvc 是一个生成器,可将基于的前端构建堆栈添加到您的ASP.NET MVC项目中。 开箱即用,它提供对 、 、 、实时重新加载、CDN、缩小、捆绑、源映射和修订的支持。 它还与 MsBuild 和 ...
前端开源库-grunt-requirejsgrunt require js,使用grunt构建基于require.js的应用程序
Grunt是第一个实现批量处理的JavaScript任务自动构建工具之一,但是他的构建速度的瓶颈和复杂的JSON配置导致了Gulp的快速发展。现在最糟糕的问题已经被解决了,Grunt仍然是一个很好的工具可供选择。