直接进入主题:
- 安装node: 链接 选择系统对应版本msi下载安装。
- 安装完成后键盘WIN+R 输入CMD,在小黑框输入
node -v
查询版本号(其实是为了看node是否成功安装)。 - 安装淘宝npm国内镜像:在小黑框输入
npm install cnpm -g --registry=https://registry.npm.taobao.org
(淘宝团队真好)。 cnpm -v
查询cnpm是否安装成功。cnpm install gulp -g
全局安装gulp。gulp -v
查询gulp是否安装成功。- 进入项目目录,(
cd example
进目录有时搞糊涂,好像是上边的)。 npm init
在已进入的目录下初始化一个环境。- 敲入项目相关描述(可选填),完成后项目目录下会有一个名为’package.json’的描述文件。
- 敲入yes。
- 为了编译sass要先配置好环境安装ruby 。
cnpm install gulp --save-dev
(–save-dev是为了把插件包显示在package.json中,为了以后在其他地方的安装)。cnpm install gulp-sass --save-dev
。安装sass- 在项目根目录新建一个名为
gulpfile.js
的js文件,打开gulp.js文件开始干活as follows:
// 引入所需插件
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css');
//clean-css的前身是minify
// 定义任务
gulp.task('sass',function(){
gulp.src('style/scss/*.scss')
//路径和自己的比对
.pipe(sass())
.pipe(cleanCSS())
.pipe(gulp.dest('style'))
//本来在style下面还有个css的文件夹,然而发现装的这个sass编译路径时只能向上跳一级,故而直接放在style文件夹下了,anyone有方法求赐教
});
// 实时监测
gulp.task('complierInstant',function(){
//complierInstant只是自己定义的名字
gulp.watch('style/scss/*.scss',['sass']);
//让谁做什么
});
15.这边配完后就齐活了,在小黑框输 gulp complierInstant
回车,然后你把scss文件夹下的scss文件写点样式,在css目录下瞧瞧…
收功