#javascript #node.js #gulp
#javascript #node.js #gulp
Вопрос:
Я столкнулся с проблемой gulp с уменьшением некоторых scss.
Я только что обновил свой файл из очень старого кода, но столкнулся с ошибкой при компиляции scss.
Я бегу gulp bundleSass
и получаю сообщение об ошибке:
TypeError: Cannot read property 'isNull' of undefined
at DestroyableTransform._transform (C:xampphtdocs...node_modulesgulp-clean-cssindex.js:15:14)
at DestroyableTransform.Transform._read (C:...node_modulesreadable-streamlib_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (C:xampphtdocs...node_modulesreadable-streamlib_stream_transform.js:172:83)
at doWrite (C:xampphtdocs...node_modulesreadable-streamlib_stream_writable.js:428:64)
at writeOrBuffer (C:xampphtdocsnode_modulesreadable-streamlib_stream_writable.js:417:5)
at DestroyableTransform.Writable.write (C:xampphtdocs...node_modulesreadable-streamlib_stream_writable.js:334:11)
at bundleSass (C:xampphtdocs...gulpfile.js:21:21)
at bundleSass (C:xampphtdocs...node_modulesundertakerlibset-task.js:13:15)
at bound (domain.js:427:14)
at runBound (domain.js:440:12)
И вот мой gulpfile.js
const {src, dest, watch} = require('gulp');
const minifyJs = require('gulp-uglify');
const minifySass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const sourceMaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const bundleCss = () => {
return src('./assets/vendor/**/*.css')
.pipe(sourceMaps.init())
.pipe(minifyCss())
.pipe(concat('bundle.min.css'))
.pipe(sourceMaps.write())
.pipe(dest('./dist/css/'));
};
const bundleSass = () => {
return src('./assets/styles/*.scss')
.pipe(sourceMaps.init())
.pipe(minifySass().on('error', minifySass.logError))
.pipe(minifyCss().write())
.pipe(sourceMaps.write())
.pipe(concat('main.min.css'))
.pipe(dest('/dist/css/'));
};
const bundleJs = () => {
return src('./assets/vendor/**/*.js')
.pipe(sourceMaps.init())
.pipe(minifyJs())
.pipe(concat('bundle.min.js'))
.pipe(sourceMaps.write())
.pipe(dest('./dist/js/'));
};
const devWatch = () => {
watch('./assets/vendor/**/*.js', bundleJs)
watch('./assets/vendor/**/*.css', bundleCss)
watch('./assets/styles/*.scss', bundleSass)
};
exports.bundleCss = bundleCss;
exports.bundleSass = bundleSass;
exports.bundleJs = bundleJs;
exports.devWatch = devWatch;
Кто-нибудь знает, почему это ошибка? bundleCss
не делает этого.
Ответ №1:
Вот правильный файл gulp с исправлениями:
const {src, dest, watch} = require('gulp');
const minifyJs = require('gulp-uglify');
const compileSass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const sourceMaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
compileSass.compiler = require('node-sass');
// Run gulp bundleCss to execute
const bundleCss = () => {
return src('./assets/vendor/**/*.css')
.pipe(sourceMaps.init())
.pipe(minifyCss())
.pipe(concat('bundle.min.css'))
.pipe(sourceMaps.write())
.pipe(dest('./dist/css/'));
};
// Run gulp bundleSass to execute
const bundleSass = () => {
return src('./assets/styles/**/*.scss')
.pipe(sourceMaps.init())
.pipe(compileSass().on('error', compileSass.logError))
.pipe(minifyCss())
.pipe(concat('main.min.css'))
.pipe(sourceMaps.write())
.pipe(dest('./dist/css/'));
};
// Run gulp bundleJs to execute
const bundleJs = () => {
return src('./assets/vendor/**/*.js')
.pipe(sourceMaps.init())
.pipe(minifyJs())
.pipe(concat('bundle.min.js'))
.pipe(sourceMaps.write())
.pipe(dest('./dist/js/'));
};
// Run gulp devWatch to execute
const devWatch = () => {
watch('./assets/vendor/**/*.js', bundleJs)
watch('./assets/vendor/**/*.css', bundleCss)
watch('./assets/styles/*.scss', bundleSass)
};
exports.bundleCss = bundleCss;
exports.bundleSass = bundleSass;
exports.bundleJs = bundleJs;
exports.devWatch = devWatch;