【广州前端】人生苦短 07 gulp之让css更美妙(2) - 黑马程序员技术交流社区

上一次，我们仅仅是在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任务.