gulp 创建不需要的目录

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'
    }
  }
};

gulp 文件夹供参考

可能有用的信息

• 我正在本地运行项目

• 可能是我电脑上的工作目录问题？？？

  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "ansi-colors": "^4.1.1",
    "autoprefixer": "^10.2.4",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "cssnano": "^4.1.10",
    "del": "^6.0.0",
    "fancy-log": "^1.3.3",
    "gulp": "^4.0.2",
    "gulp-changed": "^1.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssimport": "~3.0.2",
    "gulp-debug": "^4.0.0",
    "gulp-if": "^3.0.0",
    "gulp-jshint": "^2.0.1",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-size": "^3.0.0",
    "gulp-uglify": "^1.5.4",
    "jshint": "^2.9.2",
    "merge-stream": "^2.0.0",
    "path": "^0.12.7",
    "postcss": "^8.2.6",
    "require-dir": "^1.2.0",
    "run-sequence": "^2.2.1",
    "swiper": "^6.5.0",
    "uglifyify": "^5.0.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^4.0.0",
    "yargs": "^16.2.0",
    "gulp-scss-lint": "^1.0.0"
  },
  "dependencies": {
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-replace": "^1.1.3",
    "gulp-scss-lint": "^1.0.0",
    "gulp-watch": "^5.0.1",
    "imagesloaded": "^4.1.4",
    "jquery": "^3.6.0",
    "navigo": "^8.9.0",
    "throttle-debounce": "^3.0.1",
    "youtube-player": "^5.5.2"
  }
  }
  

Answer 1

添加

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

到我的 styles.js 文件修复了所有问题