gulp搭建的项目完美编译sass

1.1全局安装gulp

在已安装node的情况下，执行命令npm install gulp -g

1.2检测gulp是否安装成功

执行gulp -v 显示版本号即安装成功

2.1项目文件根目录新建package.json, 进入项目文件夹中

执行命令npm init

2.2检测package.json是否成功新建

注：可不使用cnpm init方式，可选择手动创建package.json配置文件

3.1本地安装gulp插件

进入你的项目文件路径中后，执行cnpm install gulp --save-dev 

注：项目文件中多了 node_modules 文件夹，里面是你本地安装的插件

3.2安装gulp-sass插件

进入你的项目文件路径中后，执行cnpm install gulp-sass --save-dev
此时package.json文件会自动更新依赖包！

4.1新建gulpfile.js（这一步需要自己新建和js文件）

 gulpfile.js是gulp的配置文件，放于根目录中。

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
    return gulp.src('src/scss/*.scss') //获取该任务需要的文件
    .pipe(sass())     //该任务调用的模块
    .pipe(gulp.dest('src/css/css'));    //将在 src/css 文件夹中生产test.css
}); 

// 默认任务
gulp.task('default',['sass','watch1']);
//监听文件
gulp.task('watch1',function(){
    return gulp.watch('src/scss/*.scss',['sass']); 
    //监听 src/css/.scss 文件，修改时自动执行 sass 任务。

})//监听/

图片的文件目录如下

5.1运行gulp

 执行gulp sass命令，执行gulpfile.js中的sass任务 

5.2执行gulp 调用default中的所有任务，开启监听事件，当 src/css/test.scss 发生修改时，会自动执行sass任务

就成功喽~~！