这个周末我开始狼吞虎咽地玩。我想设置一个可以的任务
- 编译我的sass文件
- 如果我在sass文件中出错，请继续工作
- 使用sass引导程序
- 生成源映射
- 附加浏览器前缀
- 插入已编译的css wihtout浏览器重新加载
- 快速（在dev-env中最多1-2秒）
我完成了大部分步骤，但浏览器前缀给我带来了困难这是我到目前为止得到的
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var config = {
sassPath: './sass',
bower: './bower_components',
bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};
gulp.task('sass', function () {
return gulp.src(config.sassPath + '/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
//outputStyle: 'compressed',
outputStyle: 'nested',
precision: 10,
includePaths: [
config.sassPath,
config.bower,
config.bootstrap
],
onError: function (err) {
notify().write(err);
}
}))
.pipe(concat('app.css'))
.pipe(autoprefixer('last 2 version'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(filter('**/*.css')) // Filtering stream to only css files
.pipe(browserSync.reload({stream:true}));
});
gulp.task('browser-sync', function() {
browserSync({
logLevel: "info",
server: {
baseDir: './',
//directory: true,
routes: {
"/fonts": config.fonts
}
}
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch(['./**/*.html', 'js/**/*.js'], reload);
gulp.watch('sass/*.scss',['sass']);
});
问题是autoprefixer给了我一个错误，把源映射搞砸了
我得到的错误是："gump sourcemap write:找不到源文件：C:\WEB\skilldrill_v1\skilldrill\sass\app.css"
因此，出于某种原因，它试图在sass-dir中找到css文件
[编辑]
我设法找到了这个问题，但还没能解决。管道这个东西的工作原理：吞咽自动前缀->做一些事情->前缀任务->乙烯基源地图应用
在gulp autorefixer\index.js的第35行：applySourceMap（文件，res.map.toString（））；从这一点开始，乙烯基酸映射应用程序了解到当前文件（在我的例子中是app.css）也成为了一个源。
以下是问题：a） 它认为css文件位于gulp.src（）中指定的同一文件夹中，这通常不是真的b） 它不仅适用于autoprefixer添加的行，还添加了对每一行的引用
根据这些信息，你有什么想法吗？我开始在gullow-conat中挖掘，它可以正确地处理类似的问题。
我在autoprefixer和sourcemaps方面也遇到过同样的问题。我已经改变了我的工作流程，在编译sass后创建源映射，然后在运行autoprefixer时再次加载到gulp源映射中，最后创建更新的源映射。
// Compile Sass
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('../public/assets/css'))
// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../public/assets/css'))
然后只观察css文件进行样式注入。
// CSS Injection
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}))
我知道这是一个老问题，但对于今天来这里的人来说：
我让Sourcemaps和AutoPrefixer一起工作没有问题。所以看起来这个问题已经解决了。以下设置对我有效：
const
gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create();
var
scssSourcePath = './css/**/*.scss',
cssDestPath = './css/',
cssDestFile = 'styles.css';
// Task 'styles':
// Compile SASS to CSS
gulp.task('styles', function () {
return gulp.src(scssSourcePath)
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(concat(cssDestFile))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(cssDestPath))
.pipe(browserSync.stream());
});
// Default task:
// Init Browser-Sync,
// Watch folders and start tasks on change
gulp.task('default', function () {
browserSync.init({
server: "."
});
return gulp.watch(scssSourcePath, gulp.series('styles'));
});
旁注：
实际上，我建议使用CSNano而不是Autoprefixer。它包括Autoprefixer，并进行了更多的优化。只需将上面代码中出现的所有autoprefixer替换为cssnano，您就可以获得额外的好处。
@philipb3谢谢！！花了2天的大部分时间试图弄清楚为什么autorefixer和gullow源映射不能很好地配合在一起，然后当我最终解决这个问题时，浏览器同步会完全重新加载，但没有注入新生成的css。这似乎解决了这个问题。
对于那些像我一开始从解释中感到困惑的人来说，这里是我的gump文件中的一个sass任务示例，并对正在发生的事情进行了评论。
gulp.task('sass', function() {
// create postcss processors
var processors = [
mqpacker,
autoprefixer({ browsers: ['last 2 version'] })
];
return gulp.src(src.scss)
.pipe(sourcemaps.init()) // start sourcemaps
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) // compile sass
.pipe(sourcemaps.write()) // write map inline
.pipe(gulp.dest(src.css)) // pipe to css dir
.pipe(sourcemaps.init({loadMaps: true})) // init sourcemaps again after pipe to dest dir
.pipe(postcss(processors)) // run postcss stuff
.pipe(sourcemaps.write('./maps')) // write map to external dir instead of inline
.pipe(gulp.dest(src.css)) // pipe to dest dir again
.pipe(filter('**/*.css')) // filter out everything that isn't a css file
.pipe(reload({ stream: true })); // pipe result to browser-sync for reload
});
编辑：所以当我开始在我的gullow构建中添加更多的任务和插件时，这一点最终也开始再次打破。我不完全确定是否有必要两次加载源映射。我重新构建了我的gump文件，从gump sass和gump sourcemap开始，即使在配置了其他任务之后，这似乎也适用于我。希望这两种解决方案中的一种对某人有效。
相关插件：
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
//** Post CSS Modules **//
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');
如果您正在使用浏览器同步：（还设置监视/服务任务）
//** Browser-Sync **//
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
来源：相应地更改
var src = {
base: 'ROOT_FOLDER',
js: 'ROOT_FOLDER/js/**/*.js',
css: 'ROOT_FOLDER/css',
html: 'ROOT_FOLDER/*.html',
jsdir: 'ROOT_FOLDER/js',
maps: './maps',
scss: 'ROOT_FOLDER/scss/**/*.scss'
};
任务
gulp.task('sass', function () {
// load post-css plugins
var processors = [
mqpacker,
autoprefixer({
browsers: ['last 2 version']
})
];
// start sass task
return gulp.src(src.scss)
.pipe(sourcemaps.init()) // init sourcemaps
.pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) // compile scss
.pipe(postcss(processors)) // autoprefix and combine media queries
.pipe(sourcemaps.write(src.maps)) // write emaps relative to source dir
.pipe(gulp.dest(src.css)) // pipe to css folder
.pipe(browserSync.stream()); // send stream to browser-sync task
});