1、初始化npm的配置
(请提前装好node,查看node版本的命令:node -v)
# 到项目的根目录下执行如下命令
$ npm init -y
命令执行完后,会在项目根目录下生成一个package.json文件,该文件为npm的配置文件.
2.安装我们依赖的gulp插件
# 先全局安装gulp
$ npm i -g gulp
# 安装gulp依赖
$ npm i -D gulp
3.安装gulp-sass依赖
# 安装gulp-sass
$ npm i -D gulp-sass
#安装gulp-sass,依赖node-sass,此包比较大,从github网站下载,但是往往会失败!
#怎么解决:
#使用淘宝镜像:https://npm.taobao.org
#方法:
#第一步:
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass
#第二步:
npm i -D gulp-sass
4.创建gulpfile.js配置文件
#在项目根目录手动创建gulpfile.js配置文件,模板可以去npmjs网站上进行复制https://www.npmjs.com/package/gulp-sass
代码如下:
'use strict';
// 引入gulp包,nodejs代码
var gulp = require('gulp');
// 引入gulp-sass包
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
// 创建一个gulp任务:sass
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')//让gulp去拿到原始文件
.pipe(sass().on('error', sass.logError))//把sass原始文件交给gulp-sass进行编译转换成css文件
.pipe(gulp.dest('./css'));
});
// 创建一个gulp监听任务:sass:watch
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
// 自己手动创建一个gulp任务,去默认执行
gulp.task('default',['sass:watch'],function(){
});
网友评论