如果一个web项目是由许多小的子项目（或者称之为组件）组合起来的，同时每个子项目都有属于自己的js，scss文件，但是当编译的时候（或者开发时）我们需要将子项目的这些资源文件移动到web项目的public目录下面，我们肯定不希望每次都手动copy这些文件，那样实在是太没有效率了。
让我们看一下如下目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

project-root
+---biz-module
|   +---404
|   +---auth
|   +---home
|   +---login
|   |   \---template
|   |       \---scss
|   \---user
+---public
|   +---css
|   |   \---login
|   \---modules
|       \---Material
|           +---css
|           +---fonts
|           \---js
\---template
<!-- more -->

在这个工程结构中每个组件模块以目录的封装形式放在biz-module目录下面，这些组件里面包含了自己所有的静态资源，但是对于web项目来说我们通常会把所有的静态资源放到public目录下面。如果手工复制这些资源文件明显不可能，通过配置文件，如果项目足够大配置文件会让人发疯的。幸运的是我们有gulp这个强大的构建工具，让我们可以用程序员的方式来自动构建。

当biz-module目录下面有新添加的组件的时候我们完全不需要为其添加新的配置文件内容，而是通过目录扫描自动将其加载，并且将组件内地静态资源自动移动到项目的public目录中。

下面的示例当中我们会将所有组件中的scss代码编译到项目的public/css目录下，并且根据不同的组件名称创建子目录。这里只是抛砖引玉，你可以用这个机制来分割你的组件，并且保证各个组件之间的完全结构，让项目做到插件化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

"use strict";
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var path = require('path');
var _ = require('lodash');
var fs = require('fs');
function watchBizModuleSCSS(cfg) {
  gulp.task(cfg.name + "-compile-scss", function() {
    return sass(cfg.path)
      .on('error', function(err) {
        console.error('Error!', err.message);
      })
      .pipe(gulp.dest(cfg.dist));
  });
  gulp.task(cfg.name + '-scss', function() {
    gulp.watch('biz-module/' + cfg.name + '/**/*.scss', [cfg.name+'-compile-scss']);
  });
}
// dync watch for biz-module
var bizModules = fs.readdirSync(path.join(__dirname, 'biz-module'));
var _tasks = [];
_.each(bizModules, function(m) {
  var hasSCSS = fs.existsSync(path.join(__dirname, 'biz-module', m, 'template', 'scss'));
  if (hasSCSS) {
    var cfg = {
      name:m,
      path:'biz-module/'+m+"/template/scss/",
      dist:'public/css/'+m
    }
    watchBizModuleSCSS(cfg);
    _tasks.push(m+'-scss');
    console.log("%s---->%j",m,cfg);
  }
});
gulp.task('default', _tasks);

今天试用了一下BAE，结果在创建完应用的时候居然自己给我分配了一个新的BAE的git repo地址，我人当时就傻眼了，我已经有github和git@OSC了，难道现在还要再多一个百度的git仓库,整个人当时就不好了。还好伟大的git有各种玩法。

首先在原有的git项目上添加百度的git地址,注意其中bae是新的remote branch的别名。

1
2

git remote add bae https://git.duapp.com/appidxxxxxxx
git remote -v

添加完百度的远程仓库以后第一步是要pull他，否则你无法提交仓库代码

1

git pull bae

执行到这里如果你是nodejs项目的话package.json一定会冲突，处理完冲突以后按照常规方法执行提交合并

1
2

git add .
git commit -am "your comment"

好了执行到这里我们对本地仓库的改动就全部完成了下面是推送，这里我们需要推送2次

1
2

git push origin master 
git push bae master

做了多年的web开发，自己也经常有各种各样的想法希望快速实现一下，这个时候第一遇到的问题就是搭建环境，虽然现在有很多HTML5的现成的模板可以使用，但毕竟自由也有很多年的积累，自己的东西用起来总是顺手许多，所以才有了使用grunt-init来搭建自己的模板的想法。

关于Grunt

首先现代的软件开发依赖越来越大，分工越来越细，这样也导致了项目工程中需要引入越来越多的第三方依赖，若干年前作为web项目我们还可以自己应付，但是随着web的发展项目构建也成为了web项目不得不面对的问题。在别的语言中，java有maven，python有pip，ruby有gem，那么作为前端的主力nodejs怎么自然而然的也就出现的Grunt 它就是nodejs世界的项目构建工具。

准备

首先我们必须要有nodejs环境，至于怎么装nodejs环境这里就不多说了，网上的一堆一堆的文章。

安装grunt 和grunt-init

1
2
3

$ npm install -g grunt
$ npm install -g grunt-cli
$ npm install -g grunt-init

more >>

网页项目总结

这里总结了在做网页项目中的积累和总结

more >>

在使用Express做快速web开发的时候，当程序文件一变动就需要重启server这个对于一个高效的web程序员来说是非常糟糕的体验，今天发现了一个不错的工具nodemon，当文件变动以后它可以自动重启Express服务器，当然重启Express服务器只是一个很小的功能，它可以做更多的事情，具体的可以访问它的文档。

安装

1

$ npm install -g nodemon

使用

1
2

$ cd to_your_express_project_root_path
$ nodemon bin/www

在默认情况下nodemon只会监控当前操作目录，当然你也可以通过配置来增加，这里就不多做介绍了。

今天想在公司的MAC电脑上装一个破解版的Sketch3，你知道的最为一个屌丝600多大洋买一个软件我还是很舍不得的。可是蛋疼的事情发生了，软件下完了发现不能用，原因是安全策略不允许我运行非app store和认证的程序，并且由于公司的安全策略这个选项是灰色的无法修改，我了个去啊，这个怎么可以了。所以经过1/4柱香的google找到的解决办法，So easy，一个命令就解决了

more >>

有时候会碰到需要在blog或者codepen.io写一些东西的时候需要用到图片，如果使用github来上传图片的话虽然也可以，但是总感觉贬低了github，使用起来也不是很方便，所以想到了使用Google Drive作为图床使用。

登陆Google Drive上传图片之后点击获取链接，我们会得到一个如下的URL地址

1

https://drive.google.com/open?id=YOUR_FILE_ID&authuser=0

但是这个地址是无法直接作为image的src值的，我们需要稍微做一点修改(你必须设置一下google的共享属性知道此链接的任何人都可以查看)

1

https://drive.google.com/uc?export=view&id=YOUR_FILE_ID

如果需要让这个文件直接支持下载的话，请使用如下地址

1

https://drive.google.com/uc?export=download&id=YOUR_FILE_ID

为什么选择Sublime Text

虽然Sublime Text一直都不是我的主开发编辑器（我的主编辑器是VIM），但是这并不妨碍我对它的喜欢，甚至有时候我会突然离开VIM转到ST上开发某些程序，主要原因是ST可以非常快速的进行配置已满足不同的开发环境需求，虽然VIM也可以，但是5年下来我的TMUX+VIM开发环境快捷键已经不够用了，修改起来也慢，对于一些实验性质的开发我都懒的去配置了。

more >>

Github给程序员的新编辑器

其实我很2年前就听说过Atom编辑器，也确实网上看过一些介绍，但是当第一眼看到它的样子的时候我惊呆了，这个不是Sublime Text嘛？Github这是闹哪样啊，重复造轮子啊，随即Atom就被我自动过滤了。时隔2年以后，终于鼓起勇气弄下来玩了一把，总的来说感觉还凑合。

more >>

前言

昨天晚上快11点的时候收到了一个学妹的邮件，问我关于web编程方面的问题，她说她很迷茫，不知道如何开始学习Web编程，希望我能推荐一些入门的书籍给她。看到这封邮件我也犯难了，因为我确实不知道现在关于JS、CSS和HTML方面的入门书哪些比较好，所以才有了写这样一篇博客的想法，希望能帮助还在大学或者对web编程感兴趣的人一些帮助。

准备

从我个人的经验来说刚刚开始学习编程之前有一个好的知识组织和代码管理是非常有必要的，在学习的过程中我们会经常忘记之前我们已经练习过的那些知识点，如果没有一个好的知识组织管理在学习的过程中我们会步履蹒跚，每次碰到这类问题都会从头开始再学习一遍，这个一次两次还好说时间久了真的会很让人沮丧的。
幸运的是我们现在生活在云时代，网络上有各种各样的免费工具空间可供我们选择，如果你完全是一个编程的门外汉的话，那么请按照我下面所说的步骤来建立自己的知识管理吧。

more >>