gulp 将scss 打包成css

现在scss越来越流行,scss的好处就不表了,在angular项目里一般是通过angualr-cli来完成把scss打包成css,如果我们要自己把scss打包成css怎么处理,下面基于gulp打包.demo放在github仓库

在这个之前需要安装 node,gulp,这个就不表,主要用到gulp-sass,代码如下

//Gulp plugin
var gulp = require("gulp"),
  util = require("gulp-util"),
  concat = require('gulp-concat'),
  uglifycss = require('gulp-uglifycss'),
  sass = require("gulp-sass"),
  autoprefixer = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  rename = require('gulp-rename'),
  del = require('del'),
  log = util.log;


// 样式文件打包成 一个sgm-ng-comm.min.css
var sassFiles = "./scss/style.scss";
gulp.task("sass", function(){
  log("generate css files " + (new Date()).toString());
  gulp.src(sassFiles)
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer("last 3 version","safari 5", "ie 8", "ie 9"))
      .pipe(concat('sgm-ng-common.css'))
    .pipe(gulp.dest("./dist/css"))
    .pipe(rename('sgm-ng-common.min.css'))
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/css/min'));
});

gulp.task("watch", function(){
  log("Watching scss files for modifications");
  gulp.watch(sassFiles, ["sass"]);
});
//删除生成的
gulp.task('clean', function() {
    del(['dist']);
});
gulp.task("default", ['clean','sass','themes']);

命令 如下

1. npm install -g gulp
2. npm install
3. gulp

然后 dist目录下就有了需要的css