gulp.dest() 忽略子目录
gulp.dest() ignoring subdirectory
我的文件夹树
public_html/
- css/
- - bootstrap.css
- - theme.css
- scss/
- - bootsrap/
- - - bootstrap.scss
- - theme/
- - - theme.scss
我的 gulpfile :
var gulp = require('gulp');
//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';
//Compile Styles
gulp.task('CompileSASS', function () {
gulp.src(scssPath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssPath))
});
gulp.task('watchSASS', function () {
gulp.watch(scssPath, ['CompileSASS']);
});
gulp.task('default', ['CompileSASS', 'watchSASS']);
发生了什么
当我 运行 我的 gulpfile 的默认方法时,生成的 CSS 文件保存在 CSS 文件夹的子文件夹中。
/public_html/css/bootstrap/bootstrap.css
/public_html/css/theme/theme.css
需要什么
我不想将它们保存在单独的文件夹中。
如何将所有生成的 CSS 文件直接保存在 CSS 目录中,如:
/public_html/css/bootstrap.css
/public_html/css/theme.css
你应该看看gulp-rename
尝试:
var gulp = require('gulp');
//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';
//Compile Styles
gulp.task('CompileSASS', function () {
gulp.src(scssPath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write())
//--------
.pipe(rename({dirname: cssPath}))
//--------
.pipe(gulp.dest('./'))
});
gulp.task('watchSASS', function () {
gulp.watch(scssPath, ['CompileSASS']);
});
gulp.task('default', ['CompileSASS', 'watchSASS']);
我的文件夹树
public_html/
- css/
- - bootstrap.css
- - theme.css
- scss/
- - bootsrap/
- - - bootstrap.scss
- - theme/
- - - theme.scss
我的 gulpfile :
var gulp = require('gulp');
//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';
//Compile Styles
gulp.task('CompileSASS', function () {
gulp.src(scssPath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssPath))
});
gulp.task('watchSASS', function () {
gulp.watch(scssPath, ['CompileSASS']);
});
gulp.task('default', ['CompileSASS', 'watchSASS']);
发生了什么
当我 运行 我的 gulpfile 的默认方法时,生成的 CSS 文件保存在 CSS 文件夹的子文件夹中。
/public_html/css/bootstrap/bootstrap.css
/public_html/css/theme/theme.css
需要什么
我不想将它们保存在单独的文件夹中。
如何将所有生成的 CSS 文件直接保存在 CSS 目录中,如:
/public_html/css/bootstrap.css
/public_html/css/theme.css
你应该看看gulp-rename
尝试:
var gulp = require('gulp');
//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';
//Compile Styles
gulp.task('CompileSASS', function () {
gulp.src(scssPath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write())
//--------
.pipe(rename({dirname: cssPath}))
//--------
.pipe(gulp.dest('./'))
});
gulp.task('watchSASS', function () {
gulp.watch(scssPath, ['CompileSASS']);
});
gulp.task('default', ['CompileSASS', 'watchSASS']);