让gulp动态地在与处理后的scss文件相同的目录中写入css [英] Have gulp dynamically write css in the same directory as the processed scss file

问题描述

我正在寻找写我的gulpfile.js扫描style.scss文件的主题目录，其想法是读取style.scss文件并写入相应的style.css& .min文件放在同一个目录下。我遇到的问题是，我无法找到一种方法来编写css文件，而不知道目录是什么......我不会。

这是可能的与gulp.dest（）？

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

gulpfile.js

 gutil = require（'gulp-util'），$ b $ （'gulp-rubify-css'），
 rename = require（'gulp-rename'），
 concat = require（'gulp-concat'），
 uglify = require（'gulp-uglify'）; 
 
 //路径数组
 var path = {
 scss：[
'docroot / profile / theme / ** / * / style.scss'，
 $，
 watch_scss：[
'docroot / profile / theme / ** / *。scss'，
]，
}; 
 
 //处理SASS功能
 gulp.task（'process-scss'，function（）{
 return gulp.src（path.scss）
 .pipe （前缀（['后2个版本'）））$ b $（bss（{
指南针：true，
 style：'expanded'，
}））
 .pipe b.pipe（concat（'style.css'））
 .pipe（gulp.dest（'./ relative / dir'）
 .pipe（rename（{suffix：'.min'}） ）
 .pipe（minifycss（））
 .pipe（gulp.dest（'./ relative / dir'）
 .on（'error'，gutil.log）; 
）}; 
 
 //设置gulp WATCH功能
 gulp.task（'default'，function（）{
 gulp.start（'process-scss'）; 
 gulp.watch（path.watch_scss，['process-scss']）; 
}）; 
  

解决方案

只需添加，就可以使用gulp.dest（）以下面的代码片段提供文件的基础URL。
$ b

https：// gi thub.com/gulpjs/gulp/blob/master/docs/API.md#path

  gulp.dest（函数（文件）{
返回file.base; 
} 
  

编辑： ：
$ b

  //文件路径变量声明
 var stylePath =; 
 var scriptPath =; 
 
 //路径数组
 var path = {
 scss：[
'docroot / profile / theme / ** / style / scss / style.scss'， 
]，
 watch_scss：[
'docroot / profile / theme / ** / style / scss / ** / *。scss'，
]，
 theme_base ：[
'docroot / profile / theme /'，
]，
}; 
 
 //处理SASS功能
 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 /'; 
返回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）; 
}）; 
  

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

解决方案

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

这篇关于让gulp动态地在与处理后的scss文件相同的目录中写入css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！