一饮而尽创建un想要的目录

Question

而不是用编译后的scss替换theme.scss.liquid文件，而是使用更新的theme.scss.liquid创建_styles文件夹。

​

​

gulpfile.js

const requireDir = require('require-dir');

// Require all tasks in gulpfile.js/tasks, including subfolders
requireDir('./gulp/tasks', { recurse: true });

任务内部文件夹

watch.js

const config = require('../config');
const gulp = require('gulp');
const path = require('path');
const watch = require('gulp-watch');

gulp.task('watch', () => {
  const task = config.tasks['styles'];
  
  let filePattern;

  if (task.filePattern) {
    filePattern = task.filePattern;
  } else {
    filePattern = path.join(config.root.src, task.src, '**/*.{' + task.extensions.join(',') + '}');
  } 

  watch(filePattern, gulp.parallel(task.watchTask));
});

styles.js

const config = require('../config');
const gulp = require('gulp');
const path = require('path');
const sass = require('gulp-sass');
const size = require('gulp-size');
const postcss = require('gulp-postcss');
const debug = require('gulp-debug');
const rename = require('gulp-rename');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const mergeStream = require('merge-stream');
const colors = require('ansi-colors');
const log = require('fancy-log');

const sassOptions = {
  outputStyle: 'nested', // libsass doesn't support expanded yet
  precision: 10,
  errLogToConsole: true // else watch breaks
};

const postcssPlugins = [
  autoprefixer(), // Browsers pulled from .browserslistrc
  cssnano({
    discardUnused: true, // don't discard unused at-rules (@keyframes for example that aren't used)
    zindex: false, // don't optimize z-index stacking... very dangerous
    autoprefixer: true // don't remove unnecessary prefixes. we're setting this above
  })
];

const stylePipeline = (src) => {
  const paths = {
    src: path.join(config.root.src, config.tasks.styles.src, src),
    dest: path.join(config.root.src, config.tasks.styles.dest)
  };

return gulp.src(paths.src)
  .pipe(sass(sassOptions))
  .on('error', function(error) {
    log.error(`${colors.bold.red('SCSS Compilation Error')}: ${error.message}`);
    this.emit('end');
  })
  .pipe(postcss(postcssPlugins))
  .pipe(rename({
    extname: '.scss.liquid'
  }))    
  .pipe(gulp.dest(paths.dest))
  .pipe(debug())
  .pipe(size({showFiles: true, title: 'CSS: size of'}));
}

// Run stylepipeline for each entry point file
gulp.task('styles', () => mergeStream.apply(gulp, config.tasks.styles.files.map(stylePipeline)));

• notifications.js，scripts.js，start.js

config.js

module.exports = {
  root: {
    src: './'
  },
  tasks: {
    styles: {
      src: './_styles',
      dest: './assets',
      filePattern: ['./_styles/**/*.scss'],
      files: ['theme.scss'],
      watchTask: 'styles',
      extensions: ['scss', 'css']
    },
    eslint: {
      filePattern: ['./_scripts/**/*.js'],
      extensions: ['js']
    },
    notifications: {
      filePattern: ['./_notifications/**/*.scss'],
      files: ['notifications.scss'],
      src: './_notifications',
      dest: './_notifications'
    }
  }
};

狼吞虎咽文件夹供参考

​

​

可能有用的信息

• 我正在本地运行项目

• 可能是我的计算机上的一个工作目录问题？

"devDependencies"：{ "@babel/core"："^7.13.8"，“@babel/预设-env”："^7.13.9"，"ansi-colors"："^4.1.1"，“自动修复器”："^10.2.4"，"babelify"："^10.0.0"，“浏览器化”："^17.0.0"，"cssnano"："^4.1.10"，"del"："^6.0.0“、”想像力-日志“："^1.3.3”、“吞咽”："^4.0.2“、”吞咽-更改“："^1.3.2”、“吞咽-凹”："^2.6.1“、”吞咽-cssimport“："~3.0.2”、“吞咽-调试”："^4.0.0“、”吞咽-如果“："^3.0.0"，“gulp jshint”："^2.0.1“、”gulp postcss“："^9.0.0”、“gulp rename”："^2.0.0“、”gulp sass“："^4.1.0”、“吞咽大小”："^3.0.0“、”吞咽-丑陋“："^1.5.4”、"jshint"："^2.9.2"，“合并-流”："^2.0.0“、”路径“："^0.12.7”、"postcss"："^8.2.6“、”要求-dir“："^1.2.0”、“运行顺序”："^2.2.1“、”滑动“："^6.5.0”、"uglifyify"："^5.0.2“、”乙烯基缓冲区“："^1.0.1"，“乙烯基-源-流”："^2.0.0“、”观察“："^4.0.0”、“纱”："^16.2.0“、”吞咽-scss-lint“："^1.0.0”}、“依赖关系”：{“gulp自动再固定”："^7.0.1“、”吞咽-babel“："^8.0.0”、“吞咽-替换”："^1.1.3"，“gulp lint”："^1.0.0"，“吞咽-手表”："^5.0.1"，“图像加载”："^4.1.4"，"jquery"："^3.6.0"，“导航”："^8.9.0"，“节气门”："^3.0.1"，"youtube-player"："^5.5.2“}

Answer 1

添加

.pipe(rename('theme.scss.liquid'))

我的styles.js文件修复了所有的东西