[英]Have gulp dynamically write css in the same directory as the processed scss file
我希望編寫我的gulpfile.js掃描style.scss文件的themes目錄,其目的是讀取style.scss文件並在同一目錄中寫入相應的style.css和.min文件。 我遇到的問題是我找不到編寫css文件的方法而不知道目錄是什么...我不會。
這可能與gulp.dest()有關嗎?
tl; dr:基本上......如何確定正在處理的* .scss文件的當前路徑,以便我可以將* .css文件放在同一目錄中
// 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
gulp.dest(function(file) {
return file.base;
}
編輯:我的最終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);
});
gulp.dest
將寫入保留其文件夾結構的文件。 給gulp.dest
一個基本文件夾,它會寫入它。
所以你有這個
gulp.src('docroot/profile/theme/**/*/style.scss')
和gulp.dest('dist/profile/theme')
你得到docroot/profile/theme/sample/style.scss
轉到dist/profile/theme/sample/style.scss
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.