Question

每次运行npm run prod gulp都会编译我的scss，但是每次生成的css文件的顺序都不同。这是一个问题，因为Rails会为每个实例向文件添加不同的哈希，因为它认为内容是不同的，因为顺序不同。有办法避免这种情况吗？

这是我的构建脚本：

/**
 * Builds CSS files found in /src/assets/styles
 *
 * @usage gulp styles
 */

import browserSync from 'browser-sync';
import cleanCSS from 'gulp-clean-css';
import gulp from 'gulp';
import gulpIf from 'gulp-if';
import sourcemaps from 'gulp-sourcemaps';
import notify from './notify';
import sass from 'gulp-sass';
import useref from 'gulp-useref';

function watchStyles() {
    const browser = browserSync.get('local');

    gulp.watch(`${process.env.DIRECTORY_SRC}/assets/styles/**/*.scss`, done => {
        notify.log('STYLES: file update detected, rebuilding...');
        buildStyles();
        browser.reload();
        done();
    });
}

export function buildStyles() {
    const browser = browserSync.get('local');

    return gulp
        .src(`${process.env.DIRECTORY_SRC}/assets/styles/*.scss`)
        .pipe(useref())
        .pipe(notify.onError('STYLES: error'))
        .pipe(gulpIf(process.env.SOURCE_MAPS === 'true', sourcemaps.init()))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulpIf(process.env.MINIFY === 'true', cleanCSS()))
        .pipe(gulpIf(process.env.SOURCE_MAPS === 'true', sourcemaps.write('./')))
        .pipe(gulp.dest(`${process.env.DIRECTORY_DEST_RAILS}/styles`))
        .on('end', notify.onLog('STYLES: rebuild complete'))
        .on('end', browser.reload);
}

export default function styles() {
    if (process.env.WATCH === 'true') {
        watchStyles();
    }

    return buildStyles();
}

编辑：我尝试使用useref，但是如果我连续两次运行npm run prod，则文件第一次以以下方式开头：

:root{--color-primary-100:#ff8871;--color-primary-200...
:root{--spacing-1x:8px;--spacing-2x:calc(var(--spacing-1x) * 2)...
:root{--color-primary-100:#ff8871;--color-primary-200:#fbb0a2...

第二次：

:root{--color-primary-100:#ff8871;--color-primary-200...
:root{--spacing-1x:8px;--spacing-2x:calc(var(--spacing-1x) * 2)...
:root{--spacing-1x:8px;--spacing-2x:calc(var(--spacing-1x) * 2)...

这是我的主要构建功能：

function buildMain() {
const options = {
    cache: {},
    packageCache: {},
    debug: process.env.NODE_ENV === 'development',
    plugin: process.env.NODE_ENV === 'development' ? [watchify] : [],
    entries: [`${process.env.DIRECTORY_SRC}/assets/scripts/main.js`],
    paths: [`./${process.env.DIRECTORY_SRC}/assets/scripts`],
};

const bundler = browserify(options)
    .external(vendorArray)
    .transform('envify', {
        global: true,
        NODE_ENV: process.env.NODE_ENV,
        API_BASE_URL: process.env.API_BASE_URL,
        API_LEGACY_BASE_URL: process.env.API_LEGACY_BASE_URL,
    })
    .transform('vueify')
    .transform('babelify')
    .plugin('vueify/plugins/extract-css', { out: `${process.env.DIRECTORY_DEST_RAILS}/styles/bundle.css` });

bundler.on('update', () => {
    notify.log('SCRIPTS: file update detected, rebuilding...');
    onUpdate(bundler);
});

bundler.on('log', message => {
    notify.log('SCRIPTS: rebuild complete', message);
});

return onUpdate(bundler);
}

bundle.css是每次编译都不同的文件。

Gulp以不同的顺序编译CSS

0 个答案: