本帖最后由 neekin 于 2018-1-18 16:30 编辑
上一次，我们仅仅是在gulp的任务里，处理了简单的css文件，可是现代css的写法多种多样，尤其是出现了几个预编译的css的语法，让css拥有了一些编程的概念。 例如我撰写一个类似皮肤主题的样式，有一个主色调比如是#0094ff,那么我们在样式文件里，可能会多次使用这个颜色。如果我们使用了一个变量来存储这个颜色，在我们后面使用的时候是不是特别方便。又或者我们使用了rem这个单位来适配屏幕的显示，如果有一个函数帮我们计算，也算是很方便吧。 这么看来，那么会撰写less和sass似乎也是前端必不可少的一门技能。这里我们就先不教你们怎么使用sass语法或者less语法，而是教你如何用gulp处理less和sass文件。 首先我们需要下载处理sass的程序，sass是rails框架(rails曾是一个理念非常先进的MVC框架，很多技术都被前端所吸纳使用，甚至很多其他语言框架都在某种不同程度上参考了它)御用的css预编译环境，而rails又是使用ruby语言的，所以很久以前我们要处理sass基本都是要使用ruby-sass这个软件，但是随着node的迅速发展，我们node已经可以处理sass了，利用的是node-sass，但是安装它的时候，需要一些c++运行库等，所以安装的时候经常会失败，所以安装它的时候，建议大家使用淘宝源的cnpm。 [Shell] 纯文本查看 复制代码 cnpm install gulp-sass --save-dev gulp-sass 就是我们在gulp任务里真正需要的用的库，而它所依赖的就是node-sass. 安装完毕后，我们来撰写gulp任务 [JavaScript] 纯文本查看 复制代码 var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('./src/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist'))
})然后修改我们的style任务,来调用sass任务 [JavaScript] 纯文本查看 复制代码 gulp.task('style',['sass'], function() {
return gulp.src('./src/**/*.css')
.pipe(gulp.dest("./dist"))
})完整的代码应该是这样 [JavaScript] 纯文本查看 复制代码 var gulp = require('gulp');
var ejs = require('gulp-ejs')
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('default', ['serve']);
//监听任务,监听如果有文件变动,触发reload任务
gulp.task("watch", function() {
return gulp.watch(["./src/**/*.*"], ["reload"]);
});
//reload任务,执行之前调用html任务
gulp.task("reload", ['ejs'], function(cb) {
return browserSync.reload();
});
//开启服务器任务,调用ejs和监听任务
gulp.task('serve', ['ejs', 'watch'], function() {
browserSync.init({
files: "./**/*",
server: "./dist"
});
});
gulp.task('ejs', ["style", 'js'], function() {
return gulp.src("./src/*.ejs")
.pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
.pipe(gulp.dest("./dist"))
})
gulp.task('style',['sass'], function() {
return gulp.src('./src/**/*.css')
.pipe(gulp.dest("./dist"))
})
gulp.task('js', function() {
return gulp.src('./src/**/*.js')
.pipe(uglify({ mangle: { toplevel: true } }))
.pipe(gulp.dest('./dist'))
})
gulp.task('sass', function() {
return gulp.src('./src/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist'))
})最后将style.css重命名为style.css 并且写一些sass的代码 [Sass] 纯文本查看 复制代码 $color :#0094ff;
body {
background: $color;
}最后在终端里运行gulp,yeah~~ 建议大家学完这篇后,尝试写一下less任务. | 
收藏
淘帖
踩
