如何解决为什么 Gulp 运行没有错误,但没有编译 SCSS 脚本?
我设置了我的 Gulpfile,到目前为止它看起来不错。我没有错误了。他编译的时候看起来有点太快了。但如果他真的愿意做这份工作,这不会有任何问题。但是当我运行我的 gulp css 任务时,它没有将我的 SCSS 文件编译成 CSS,也没有在之后创建缩小的、连接的构建文件。我检查了路径并在互联网上搜索了解决方案,但这并没有进一步帮助我。 我没有错误。那他为什么不做这份工作呢?我在 gulpfile 中犯了一个错误吗?我用于运行任务异步函数以避免错误。但它似乎只是让错误消失,但它不起作用。有人知道我需要改变什么吗?
这就是我的控制台在运行 gulp css 后所做的:
[08:58:02] Using gulpfile C:\xampp\htdocs\united-in-faith\gulpfile.js
[08:58:02] Starting 'css'...
[08:58:02] Finished 'css' after 3.71 ms
那是我的 gulpfile:
const { src,dest,watch,task,series,parallel } = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var minifyPHP = require('gulp-PHP-minify');
var sourcemaps = require('gulp-sourcemaps');
var scssOrigin = './scripts/scss/**/_*.scss';
var jsOrigin = './scripts/js/*.js';
var cssFilePath = './scripts/css/**/_*.css';
var jsDestination = './build/scripts/js';
var cssDestination = './scripts/scripts/css';
var cssDestinationMin = './build/scripts/css';
var jsDestinationMin = './build/scripts/js';
var PHPDestination = './build';
var htmlDestination = './build';
var appCssMin = 'app.min.css';
var appJsMin = 'app.min.js';
var appJs = 'app.js';
var appCss = 'app.css';
var watchJs = './scripts/js/**/_*.js';
var watchCss = './scripts/scss/**/_*.scss';
function js(done) {
src(jsOrigin)
.pipe(concat({ path: appJsMin}))
.pipe(uglify())
.pipe(dest(jsDestinationMin));
done();
}
function css(done) {
var processors = [
autoprefixer,];
src(scssOrigin,{ sourcemaps: true})
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(postcss(processors))
.pipe(dest(cssDestination));
src('scripts/scss/main.scss',{ sourcemaps: true})
.pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
.pipe(dest('scripts/css'));
done();
}
function minifyCss (done) {
return src(cssFilePath,{ sourcemaps: true})
.pipe(sourcemaps.init())
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(concat(appCssMin))
.pipe(sourcemaps.write('./maps'))
.pipe(dest(cssDestinationMin));
}
/*function cssNoMin (done) {
var processors = [
autoprefixer,sass.logError))
.pipe(postcss(processors))
.pipe(dest(cssFilePath));
src(cssFilePath,{ sourcemaps: true})
.pipe(concat(appCss))
.pipe(dest(scssDestinationMin))
.pipe(browserSync.stream());
done();
}
*/
function jsNoMin (done) {
src(jsOrigin)
.pipe(concat({ path: appJs }))
.pipe(dest(jsDestinationMin))
.pipe(browserSync.stream());
done();
}
function browserSyncServer (done) {
browserSync.init({
open: false,injectChanges: true,server: { //server variable set elsewhere
baseDir: './',proxy: "https://localhost/united-in-faith",port: 8080,online: true
},ui: {
port: 8082
}
});
done();
}
function browserSyncReload (done) {
browserSync.reload();
done();
}
function publishPHP () {
return src('sites/**/*PHP')
.pipe(dest(PHPDestination));
src('sites/**/*html')
.pipe(dest(PHPDestination));
}
function watch_files () {
watch('*.PHP',browserSyncReload);
watch([watchJs,watchCss],series(css,minifyCss,js,browserSyncReload))
.on('error',function (err) {
console.log(err.toString());
this.emit('end');
});
}
function watchNoMin () {
watch('*.PHP',jsNoMin,function (err) {
console.log(err.toString());
this.emit('end');
});
}
task("default",async function() {
series(css,browserSyncServer);
});
task("css",browserSyncServer);
});
task("js",async function() {
series(js,browserSyncServer);
});
task("publish",publishPHP,browserSyncServer);
});
task("watch",series(watch_files,browserSyncServer));
task("watch-no-min",series(watchNoMin,browserSyncServer));
task("all",parallel(css,js));
task("css-no-min",css);
task("js-no-min",js);
这是我对 Package.json 的依赖
"dependencies": {
"lodash": "^4.17.21","@fortawesome/fontawesome-pro": "^6.0.0-beta1","bootstrap": "^5.0.1","bootstrap-icons": "^1.5.0","ckeditor4": "^4.16.1","cookieconsent": "^3.1.1","emojione": "^4.5.0","gulp-PHP-minify": "^0.1.3","jquery": "^3.6.0","jquery-ui": "^1.12.1","jquery-ui-touch-punch": "^0.2.3"
},"devDependencies": {
"q": "^1.5.1","autoprefixer": "^10.2.6","browser-sync": "^2.26.14","chokidar": "^3.5.2","debug": "^4.3.1","gulp": "^4.0.2","gulp-clean-css": "^4.3.0","gulp-cli": "^2.3.0","gulp-concat": "^2.6.1","gulp-postcss": "^9.0.0","gulp-sass": "^4.1.0","gulp-sourcemaps": "^3.0.0","gulp-uglify": "^3.0.2","gulp-watch": "^5.0.1","webpack": "^5.40.0","webpack-cli": "^4.7.2"
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。