Have gulp dynamically write css in the same directory as the processed scss file

问题

I am looking to write my gulpfile.js scan the themes directory for style.scss files, and the idea is to read the style.scss file and write the corresponding style.css & .min file in the same directory. The issue that i'm having is that I can't find a way to write the css file without knowing exactly what the directory is... which I will not.

Is this possible with the gulp.dest()?

tl;dr: Essentially... how can I determine the current path of the *.scss file being processed so that I can place the *.css file in the same directory

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

回答1:

Just to add, it turns out that you can use gulp.dest() to provide the file's base url with the following snippet.

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

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

edit: My final gulp task looked like this:

// 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);
});

回答2:

gulp.dest will write the files keeping their folder structure. Give a base folder to gulp.dest and it will write to it.

So you have this

gulp.src('docroot/profile/theme/**/*/style.scss') and gulp.dest('dist/profile/theme')

you get docroot/profile/theme/sample/style.scss turns to dist/profile/theme/sample/style.scss.

来源：https://stackoverflow.com/questions/25631589/have-gulp-dynamically-write-css-in-the-same-directory-as-the-processed-scss-file

标签

javascript

gulp