requirejs的Optimizer 对require项目的合并与压缩

前言

我博客前面关于requirejs的文章,写了好几篇了,关于requirejs快速入门,可以看下http://www.haorooms.com/post/requirejs_sy_lj 那项目中用requirejs方式书写和管理js,效果是不言而喻的,但是你用requirejs引入的依赖文件,虽然是异步的,但是还是会加载,还是会发生多次http请求!那么如何把这些js文件都合并到一起呢?这就引入了Optimizer,关于Optimizer,我们可以详见:http://requirejs.org/docs/optimization.html 这里有Optimizer的文档和用法。

但是,一般很多文档都是晦涩难懂的,其实,明明是很简单的问题,很多文档写的看起来很复杂,我在这里简单介绍一下requirejs的Optimizer,帮助大家迅速学会和使用Optimizer。

使用步骤。

Grunt自动化部署css,js,image,html等(附视频)

前几天分享了前端js和css的压缩合并之grunt,然后并简单录制了一个小视频,之后不少朋友QQ留言,问有没有grunt深入地视频教程。哈哈,说实话,上次录制的视频很差,我是随便录制的,没有想到收到不少朋友的好评!好吧,我继续努力,今天有时间和大家继续分享一下grunt。

其实,grunt有很多很多插件,上次我也给大家讲了,grunt的应用,很大程度是grunt插件的应用!

上节课,我载入模块是这么写的!

  //载入concat和uglify插件,分别对于合并和压缩
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

本节课,我引用了matchdep这么一个模块,当然,这个模块是要在package.json中配置,关于package.json有哪些字段,请看这边博客!https://github.com/ericdum/mujiang.info/issues/6

git常用命令总结

前言

用git也好久了,感觉平时也就是git commit,git pull ,git push ,git add,git submodule,git stash,git branch,git checkout,git merge 等等,下面这个总结是分类进行的,比较清楚明了。

创建

复制一个已创建的仓库:

$ git clone ssh://haorooms@domain.com/blog.git

创建一个新的本地仓库:

$ git init

本地修改

html5之Localstorage本地存储

题外话

今天把博客里面的内容,同步在github的issues中了。具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star。

Localstorage本地存储基本用法

如何创建和访问 localStorage

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

上面就创建了一个localStorage。

js和jquery懒加载之可视区域加载

javascript懒加载之可视区域加载

在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结,大家可以看一下,复习一下!

了解了各种高度之后,我们开始我们的js代码吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>haorooms前端博客-可视区域加载之 javascript</title>
    <style>
    img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}

    </style>
</head>
<body>
    <img haoroomslazyload="Chrysanthemum.jpg" src="" >
    <img haoroomslazyload="Desert.jpg" src="" >
    <img haoroomslazyload="Hydrangeas.jpg" src="" >
    <img haoroomslazyload="Koala.jpg" src="" >
    <img haoroomslazyload="Lighthouse.jpg" src="" >
    <img haoroomslazyload="Penguins.jpg" src="" >
    <img haoroomslazyload="Tulips.jpg" src="" >