0

我设置了我的 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,
    ];

    src(scssOrigin, { sourcemaps: true})
        .pipe(sass({ outputStyle: "expanded" }).on('error', 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', browserSyncReload);
    watch([watchJs,watchCss], series(css, jsNoMin , browserSyncReload))
    .on('error', function (err) {
        console.log(err.toString());
        this.emit('end');
    });
}


task("default", async function() {
    series(css,minifyCss,js,browserSyncServer);
});

task("css", async function() {
    series(css,minifyCss,browserSyncServer);
});

task("js", async function() {
    series(js,browserSyncServer);
});

task("publish", async function() {
    series(css, minifyCss,js,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"
}
4

0 回答 0