gulp如何编译sass

wuyou 2017-02-09

gulp是一个前端自动化构建工具,这篇文章仅介绍如何编译sass

安装Gulp之前需要先安装Node.js、sass(可参考前一篇sass安装)

首先在全局安装$ sudo npm install gulp -g

然后在终端打开工作目录

$ npm init

npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)(终端会自动出现下面内容,这里一路回车到yes)


gulp如何编译sass
 创建完之后,我们执行下面的命令:

$ npm install gulp --save-dev

这一次,我们局部安装Gulp。使用—save-dev,将通知计算机在package.json中添加gulp依赖。

会多出这样的一个文件夹


gulp如何编译sass
 

在我们来创建gulpfile.js


gulp如何编译sass
 

此时命令行执行

gulp sass


gulp如何编译sass
 会在css文件夹自动编译生成所有的css


gulp如何编译sass
现在加一点代码实现自动编译


gulp如何编译sass
 在命令行执行:gulp sass:watch,就可实现监听文件变化来自动编译

 
gulp如何编译sass
 现在我们在改动scss的时候对应的CSS也会随之改变

相关推荐