gulp 安装

1.安装node 直接node官网根据系统下载运行安装

2.安装完成后键盘 win+r 输入cmd，在小黑框输入 node -v 查询版本号

3.安装淘宝npm国内镜像：

Npm install cnpm -g --registry=https://registry.npm.taobao.org

4.cnpm -v 查询cnpm是否安装成功

5.cnpm install gulp -g全局安装gulp

6.gulp -v查询gulp是否成功安装。

7.进入项目目录

假如在F盘，先输入F: 回车后，

再输入具体目录，如 F:\我的文档\Documents\HBuilderProjects\contractDemo>  回车

8.npm init 在已进入的目录下初始化一个环境。

9.敲入项目相关描述（可选填），完成后项目目录下会有一个‘package.json’的描述文件。敲入 yes 结束描述文件的输入

10.cnpm install gulp --save-dev

（--save-dev是为了把插件包显示在package.json中，为了以后在其他地方的安装。）

11.cnpm install gulp-sass --save-dev 安装sass

12.在项目跟目录下新建一个名为gulpfile.js的js文件，编辑这个文件

 

/*** Created by feili on 2016/9/24. */

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装gulp所用到的地方   

sass = require('gulp-sass');

var autoPrefixer=require('gulp-autoprefixer');

 

//在小黑框中输入 gulp testSass 则会编译一次.scss

//gulp 根目录为 ./

gulp.task('testSass', function () { //定义一个testSass任务（自定义任务名称）

    gulp.src('./sass/*.scss') //该任务针对的文件       

    .pipe(sass({outputStyle:'compact'})) //该任务调用的模块       

    .pipe(gulp.dest('./css')); //将会在src/css下生成index.css

});

 

//定义监听，在小黑框中输入 gulp sass:watch ，每次编辑scss文件后，会自动编译成css文件

gulp.task('sass:watch',function(){

gulp.watch('./sass/*.scss',['testSass']);

});