![](/img/trans.png)
[英]Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css?
[英]How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS
我的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
。 這可以在下面工作,你可以逐步添加新的管道,看看有什么打破它
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"
}
}
以下是運行$ gulp
node_modules
后您將擁有的內容(不包括node_modules
文件夾)
$ 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.