前端之旅：GTD任务工具改版

这周干了大致这样几件事情

• 4.9 学习使用jshint
• 4.10 使用artTemplate分离js中的html模板代码
• 4.13 学习并使用css预处理less
• 4.15 学习gulp基本用法

关于jshint我已经写了篇blog，这里不再介绍，下面来谈谈其他几个小点。

artTemplate

要说模板引擎众多，诸如Mustcache，和基于Mustcache的Handlebars、或者Underscore的template，或者jQuery自带的，但是最后我相中了doT和artTemplate，而选择artTemplate是因为官网文档友好，入门简单。而且维护者比较勤，距离我在代码中使用artTemplate才几天，我刚打开官网看到又有更新动态，从文档的更新可以看出作者在加入新功能和优化。
artTemplate官网，介绍如是

art-template 是一个性能出众、设计巧妙的模板引擎，无论在 NodeJS 还是在浏览器中都可以运行。

虽然官网介绍有预编译什么高级功能，但对我目前没什么用，我只需要基础功能即可。
artTemplate分为原生语法和简单语法，我选择了简单语法。
准备写从如何从下载到正式跑通的基础入门，但是不幸的是，官网文档更新后我都有点不认识了，所以要学习的同学请查看官网。

CSS预处理器Less

由于CSS不具备编程能力，而随着现代Web应用开发的复杂度增加，预处理器和后处理器应运而生。预处理器有诸如Less、Sass、Stylus，Less虽稍弱一点但是简单，所以我选择了Less，等以后需要更强大功能的时候再选择其他的，后处理器有诸如PostCSS，它们之间的区别，在我给出的参考资料中有介绍，我就不献丑了。

如何使用

方法一

• 安装nodejs和npm
• 再安装npm install less -g
• 然后在命令行编译lessc file.less > file.css
• 在html文件中引入css文件而不是less

  方法二

  在浏览器端直接引入less文件，我没用过，不发言。

  方法三

  安装一个图形化编译软件，比如koala，将less项目拖入，它会在less改变时自动编译成css

  方法四

  结合IDE使用，比如SublimeText有专门的less2css插件。

  方法五

  结合自动化构建工具使用，比如我用gulp，然后用gulp-less插件仍然可以完成编译工作

参考

慕课网也有less的入门课程
至于其它事宜，请查看官网，或者Less中文网

关于各种预处理器的对比文章：

• 再谈 CSS 预处理器
• CSS 预处理器与 CSS 后处理器

使用gulp改善开发流程

用自动化构建工具增强你的工作流程！

gulp和Grunt属于同一个对比行列，区别是gulp是基于流，而Grunt基于文件；gulp采用js语言编程控制，而Grunt使用配置文件。

gulp官网 和 gulp 中文网 提供了入门、文档、API、插件等介绍和使用方法
要想了解一个gulp插件如何使用的方法，直接到gulp插件官网搜索你需要的插件，然后点进去就可以找到了。

我现在使用了这几个插件：

gulp-less：这里有一篇gulp-less入门文章
gulp-browser-sync：这是一个开发时自动刷新浏览器的插件
gulp-imagemin：压缩图片
gulp-clean-css：压缩css
gulp-csslint：校验css
gulp-uglify：混淆压缩js
gulp-rename：重命名输出文件
gulp-concat：连接文件

del不属于gulp插件，只是一个npm插件，用于清理文件文件夹：http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/

本来我还可以加入更多插件的，比如文件合并的gulp-concat，还有压缩js的gulp-uglify等，但是考虑后期代码还要做其他工作，暂时不想引入，所以后面再说

——真的是一条分割线—–