让gulp动态地将css写入与处理后的scss文件相同的目录中

2024-02-05

我希望编写 gulpfile.js 扫描主题目录中的 style.scss 文件,其想法是读取 style.scss 文件并在同一目录中写入相应的 style.css 和 .min 文件。我遇到的问题是,在不确切知道目录是什么的情况下,我找不到编写 css 文件的方法...我不会。

这可以用 gulp.dest() 实现吗?

tl;dr:本质上...我如何确定正在处理的 *.scss 文件的当前路径,以便我可以将 *.css 文件放在同一目录中

gulpfile.js

// GULP variable declarations
var gulp = require('gulp'),
  gutil = require('gulp-util'),
  sass = require('gulp-ruby-sass'),
  prefix = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  rename = require('gulp-rename'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify');

// Paths array
var path = {
  scss: [
    'docroot/profile/theme/**/*/style.scss',
  ],
  watch_scss: [
    'docroot/profile/theme/**/*.scss',
  ],
};

// Process SASS functionality
gulp.task('process-scss', function() {
  return gulp.src(path.scss)
    .pipe(sass({
      compass: true,
      style: 'expanded',
    }))
    .pipe(prefix(['last 2 versions']))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./relative/dir')
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('./relative/dir')
    .on('error', gutil.log);
});

// Setup the gulp WATCH functionality
gulp.task('default', function() {
  gulp.start('process-scss');
  gulp.watch(path.watch_scss, ['process-scss']);
});

补充一下,您可以使用 gulp.dest() 来提供文件的基本 url 和以下代码片段。

https://github.com/gulpjs/gulp/blob/master/docs/API.md#path https://github.com/gulpjs/gulp/blob/master/docs/API.md#path

gulp.dest(function(file) {
    return file.base;
}

edit:我最后的 gulp 任务如下所示:

// File path variable declarations
var stylePath = "";
var scriptPath = "";

// Paths array
var path = {
  scss: [
    'docroot/profile/theme/**/style/scss/style.scss',
  ],
  watch_scss: [
    'docroot/profile/theme/**/style/scss/**/*.scss',
  ],
  theme_base: [
    'docroot/profile/theme/',
  ],
};

// Process SASS functionality
gulp.task('process-scss', function() {
  return gulp.src(path.scss)
    .pipe(gulp.dest(function(file) {
      var relative = file.relative.split("/");
      stylePath = path.theme_base + relative[0] + '/style/';
      return file.base;
    }))
    .pipe(sass({
      compass: true,
      style: 'expanded',
    }))
    .pipe(prefix(['last 2 versions']))
    .pipe(concat('style.css'))
    .pipe(gulp.dest(function() { return stylePath; }))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest(function() { return stylePath; }))
    .on('error', gutil.log);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

让gulp动态地将css写入与处理后的scss文件相同的目录中 的相关文章

随机推荐