gulp + jade构建项目

最近接触了自动化工具Gulp（什么是Gulp？），并用他为自己写了以jade， sass ，coffeeScript为预编译的自动编译与刷新的工作流。“工具的作用是提高生产效率”，当我运用自动化工具，才知道原来还有这么好的东西。（想到刚开始一个一个的解析sass。。捂脸）

前提

• 已安装npm(还没安装？点这里)

需要的Gulp插件

• gulp-sass :编译sass文件为css文件链接描述（什么是sass？）
• gulp-jade :编译jade文件为HTML文件（什么是jade？）
• gulp-coffee:编译coffeeScript文件为js文件什么是coffeeScript?）
• browser-sync :浏览器同步测试工具

1.新建一个项目project

app存放预编译的代码，myBlog存放编译后的代码

创建package.json文件（用来保存项目相关信息）

$ project> npm init

2.在该项目下安装gulp

全局安装

$ project> npm install gulp -g

局部安装

$ project> npm install gulp --save-dev

3.安装所需的插件

$ project> npm install gulp-sass gulp-jade gulp-coffee browser-sync --save-dev

若有错误，你可以尝试一个一个的安装~

个个所需文件安装成功后的目录，node_nodeules为存放插件的地方

4.实例化插件

在目录下创建gulpfile.js(必须是这个名字,严肃脸)

 

5.创建gulp任务

 

$ project> gulp watch

 

6.工作流完成,让我们把注意力聚焦于编程本身,不再让那些编译刷新的重复性工作打断我们的思路.

作者：
链接：https://www.imooc.com/article/10921
来源：慕课网