gulp配置自动解析sass及scss转化为css

2018.05.14 10:22 阅读 942 评论 0

gulp自动构建工具,可以配置自动解析sass为css

首先在一个项目下安装gulpgulp-sass依赖包

npm install gulp gulp-sass -D

在项目根目录下新建gulp运行文件gulpfile.js,并在其中添加如下内容

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', function() {
  return gulp.src('./src/*.scss')
    .pipe(sass({outputStyle: 'expanded'})).on('error', sass.logError)
    .pipe(gulp.dest('dist/css'))
})


gulp.task('default', function() {
  gulp.watch('./src/*.scss', ['sass'])
})

配置中outputStyle可选项:

  • nested:缩进嵌套代码格式(默认为此格式)
  • expanded:展开代码格式
  • compact:紧凑代码格式
  • compressed:压缩代码格式

在命令行下运行gulp,会自动运行gulpfile.js文件。通过配置gulp会监听src下面以scss结尾的文件,并通过gulp-sass编译,编译后的文件存到dist/css下。

0 条评论
发布