码迷,mamicode.com
首页 > 其他好文 > 详细

Gulp执行预处理

时间:2018-03-27 12:37:16      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:编写   pfile   安装   require   ima   tin   on()   png   class   

1. 在项目中安装 gulp-sass插件来编译Sass

npm install gulp-sass --save-dev

技术分享图片

 

2. 在gulpfile.js中编写

var gulp = require(gulp);
var sass = require(gulp-sass);   //引入插件

gulp.task(‘sass‘, function(){
return gulp.src(‘app/scss/styles.scss‘)
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest(‘app/css‘)) 输出的结果文件,sass处理之后,我们希望它生成css文件并产出到app/css目录下
});
 });

 

3.编写styles.scss

.testing {
  width: percentage(3/4);
}

 4. 在npm 中输入 gulp sass

5.效果:

                      在文件中多出来了styles.css

sass编译前:                                                                                            sass编译后:     技术分享图片

 

技术分享图片

 

6.styles.css的代码:

.testing {
  width: 75%; }

 

Gulp执行预处理

标签:编写   pfile   安装   require   ima   tin   on()   png   class   

原文地址:https://www.cnblogs.com/guangzhou11/p/8656437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!