Javascript 如何使用Gulp缩小和自动刷新SASS/SCSS中的CSS文件

我的gulpfile有问题，不知道出了什么问题

问题：autoprefixer无法按预期工作，并且无法始终按预期正确输出.css和.min.css文件

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var config = {
    sassMain: 'style/Main.scss',
    sassFiles: 'style/**/*.scss',
    cssfiles: ['style/Main.css'],
    dest: 'style',
    autoprefixerOptions: {
    browsers: ['last 2 versions', '> 5%']
    }
};

gulp.task('compile-sass', function () {
    return gulp.src(config.sassMain)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix(config.autoprefixerOptions.browsers))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
});

gulp.task('default', function () {
    gulp.watch(config.sassFiles, ['compile-sass']);
});

---

有什么想法吗？

首先，我建议将所有源文件放在文件夹

src

中，并将内置文件放在

build

中。这在下面起作用，您可以增量添加新管道，以查看是什么破坏了它

gulpfile.js main.scss package.json 结果文件结构 以下是运行

$gulp

（不包括

node\u模块

文件夹）后的内容

我的环境

---

我试着把它简化为：

.pipe（sass（））

.pipe（gulp.dest（config.destDir））

，但它仍然不起作用。我的npm/节点包可能有问题吗？我原来的Gulpfile.js上周还在工作。node

5.1.0

和npm

3.3.12

尝试完全按照我编写和测试的方式使用我的代码。然后，如果需要的话，增加更多的代码。我试过了。得到同样的东西。我的node和npm软件包

rm-rf node\u modules&&npm install

在谷歌上找到了一个不错的发现，看起来确实有点不对劲。一条注释-

gulp minify css

已被弃用，并在发表此注释时引入了至少一个安全漏洞（）。现在建议使用

gulp clean css

。

var gulp = require('gulp')
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer')
var minCss = require('gulp-minify-css')
var rename = require('gulp-rename')

var config = {
   srcCss : 'src/scss/**/*.scss',
   buildCss: 'build/css'
}

gulp.task('build-css', function(cb) {
   gulp.src(config.srcCss)

      // output non-minified CSS file
      .pipe(sass({
         outputStyle : 'expanded'
      }).on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest(config.buildCss))

      // output the minified version
      .pipe(minCss())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(config.buildCss))

   cb()
})

gulp.task('watch', function(cb) {
   gulp.watch(config.srcCss, ['build-css']) 
})

gulp.task('default', ['build-css', 'watch'])

$degrees: '50%';

.rotated {
    transform: $degrees;
}

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.0"
  }
}

$ tree -I node_modules
.
├── build
│   └── css
│       ├── main.css
│       └── main.min.css
├── gulpfile.js
├── package.json
└── src
    └── scss
        └── main.scss

4 directories, 5 files

$ node -v
v5.1.0

$ npm -v
3.3.12

$ gulp -v
[13:39:54] CLI version 1.0.0
[13:39:54] Local version 3.9.0