Gulp sourcemaps 模块没有创建文件,没有错误
Gulp sourcemaps module not creating file, no errors
我正在处理 gulp 工作流程,并且刚刚将 gulp-sourcemaps
传送到我的管道。然而,它并没有像它应该的那样创建一个 sourmapfile。我自由地承认我对文件夹目标参数感到困惑。我希望 sourcemap 与我的 css 文件位于同一文件夹中,除非有充分的理由不这样做。
package.json
{
"name": "gulp-intro",
"version": "1.0.0",
"description": "Simple Gulp introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-rename": "^1.2.3",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
}
}
Gulpfile.js
/**
* = Gulp specific dependencies
*/
const gulp = require('gulp');
const rename = require('gulp-rename');
/**
* = CSS Style task
*/
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const styleSrc = './src/scss/style.scss';
const styleDist = './assets/css/';
gulp.task('style', () => {
gulp.src(styleSrc)
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});
结果证明这是一个愚蠢的错误,但我忘记在我的 gulp 任务开始时使用 sourcemaps.init() 初始化 gulp-sourcemaps。
示例:
gulp.task('style', () => {
gulp.src(styleSrc)
// Initialize sourcemaps
===> .pipe(sourcemaps.init() <===
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});
我正在处理 gulp 工作流程,并且刚刚将 gulp-sourcemaps
传送到我的管道。然而,它并没有像它应该的那样创建一个 sourmapfile。我自由地承认我对文件夹目标参数感到困惑。我希望 sourcemap 与我的 css 文件位于同一文件夹中,除非有充分的理由不这样做。
package.json
{
"name": "gulp-intro",
"version": "1.0.0",
"description": "Simple Gulp introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-rename": "^1.2.3",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
}
}
Gulpfile.js
/**
* = Gulp specific dependencies
*/
const gulp = require('gulp');
const rename = require('gulp-rename');
/**
* = CSS Style task
*/
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const styleSrc = './src/scss/style.scss';
const styleDist = './assets/css/';
gulp.task('style', () => {
gulp.src(styleSrc)
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});
结果证明这是一个愚蠢的错误,但我忘记在我的 gulp 任务开始时使用 sourcemaps.init() 初始化 gulp-sourcemaps。
示例:
gulp.task('style', () => {
gulp.src(styleSrc)
// Initialize sourcemaps
===> .pipe(sourcemaps.init() <===
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});