最近接触了自动化工具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
热门评论
你这个自己测试过吗? 根本不能实现自动刷新啊??