Node.jsGulp如何编译sass

Gulp 是一个自动化工具,前端开发者可以应用它来处理大规模任务:

1、搭建web服务器

2、文件保留时自动重载浏览器

3、使用预处理器如Sass、LESS

4、优化资源,比如压缩CSS、JavaScript、压缩图片

理所当然Gulp能做的远不止这一个。倘使你够疯狂,你居然足以行使它搭建一个静态页不熟悉成器。Gulp真的够用强大,但你不大概不学会明白它。

那是那篇小说的重大目标。支持您询问Gulp的底蕴用法,助你早日形成一统天下的伟业。

俺们就要做的

那篇小说的末尾,你会所有不难的一个工作流:

  • 编译Sass

除了,你还将学会运用简单命令链式调用五个职分。

安装Gulp

安装Gulp以前你需求先安装Node.js。

假使您还没设置Node,你可以在 这里 下载。

设置完Node.js,使用Terminal(终端,win下是cmd)用上边发号施令安装Gulp

$ sudo npm install gulp -g

唯有mac用户才须求sudo命令,并且毫不把$符号也复制进去,那不是你的菜。

npm install 是点名从Node Package Manager(npm 你怕毛)安装的指令。

-g 表示全局安装,那样你在微机上其余岗位都能只用gulp 命令。

Mac 用户须要管理员权限才能全局安装,所以要求sudo。

接下去使用Gulp创建项目。

创建Gulp项目

第一,大家新建一个project文件夹,并在该目录下执行 npm init 命令:

$ npm init

npm
init命令会为您创制一个package.json文件,这一个文件保留着这几个序列相关音信。比如您用到的各样倚重(那里根本是插件)(终端会自行出现下边内容,这里先随便填就行)

Node.js 1

创办完事后,大家进行下边的授命:

$ npm install gulp --save-dev

这一回,咱们一些安装Gulp。使用—save-dev,将文告计算机在package.json中添加gulp依赖。

Node.js 2

目录结构如下

Node.js 3

在那一个布局中,大家选拔app文件夹作为支付目录(所有的源文件都位于那上边),dist文件夹用来存放生产条件下的始末。

那一个文件名,你想怎么起都行,但请务必牢记您的目录结构。以往我们来创设gulpfile.js,输入如下。

Node.js 4

下边来设置gulp-sass插件编译sass文件,

1、app下命令行输入:

  $ npm install gulp-sass –save-dev

此时package.json文件会自动更新依赖包!
2、在gulpfile.js内引入该插件

3.告知gulp要执行的任务,gulpfile.js中的task任务

Node.js 5

那儿命令行执行

             gulp sass

Node.js 6

会在dist/css/自动编译生成所有的css

Node.js 7