I'm new on gulpfile and i can't figure out how can I iterate through multiple folders using a single task
My src folder structure
folder1
assets
style.scss
folder2
assets
style.scss
folder3
subfolder1
assets
style.scss
subfolder2
assets
style.scss
Into dist folder i want something like this ( without 'assets' folder )
folder1
style.css
folder2
style.css
folder3
subfolder1
style.css
subfolder2
style.css
I have a few tasks that work properly but I want them to be a single task
How can I achieve that?
var pack1 = ['folder1', 'folder2'];
var pack2 = ['subfolder1', 'subfolder2'];
gulp.task('scss_pack1', function () {
pack1.map(function (element) {
return gulp.src('src/'+element+ '/assets/*.scss')
.pipe(sass())
.pipe(gulp.dest('/dist/'+element+'/));
})
gulp.task('scss_pack2', function () {
pack2.map(function (element) {
return gulp.src('src/folder3/'+element+ '/assets/*.scss')
.pipe(sass())
.pipe(gulp.dest('/dist/folder3/'+element+'/));
})
Try this:
const gulp = require("gulp");
const sass = require("gulp-sass");
const flatten = require('gulp-flatten');
gulp.task('default', function () {
return gulp.src("src/**/assets/style.scss")
.pipe(sass())
// flatten subPath(0, -1) will strip off the last folder, i.e., 'assets'
// extracts the first element through the second-to-last element in the sequence.
// so subfolder1/assets -> subfolder1 (the second-to-last element is subfolder1)
// and assets/ -> nothing (since there is no second-to-last element!!)
.pipe(flatten({ subPath: [0, -1] }))
.pipe(gulp.dest("dist/"));
});
gulp-flatten
Related
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
/project
--> Module1
--> scss
--> Test1.scss
--> Module2
--> scss
--> Test2.scss
Click here for folder structure
I have a project with multiple modules. I'm trying to write a gulp task that compiles the sass files and creates css files within each module. I have the following folder structure and gulpfile.
The task is currently designed to compile the scss files and create the css and css.map files in the same location as the scss files.
How can I move them both outside the scss folder, but still inside their respective modules?
You can add a config file to specify the build location for the files so that they can be generated in a folder of your choice, like so:
let gulp = require('gulp');
let sass = require('gulp-sass');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let gulpUtil = require('gulp-util');
let merge = require('merge-stream');
const CONFIGS = [require('./gulp.module1.config'), require('./gulp.module2.config')];
gulp.task('sass', function () {
let tasks = CONFIGS.map(config => {
return gulp.src(config.sass.src)
.pipe(sass())
.on('error', error => console.log(error))
.pipe(rename('app.min.css'))
.pipe(gulp.dest(config.buildLocations.css));
});
return merge(tasks);
});
Config 1:
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module1/scss/*.scss']
},
buildLocations: {
css: './project/module1/'
}
}
config 2
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module2/scss/*.scss']
},
buildLocations: {
css: './project/module2/'
}
}
Folder Structure
UPDATE: If you don't want to write an individual config file you can use the path library to rename it, leaves you with the files on the parent level.
gulp.task('sass', function () {
return gulp.src('./project/**/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname)
return file;
}))
.pipe(gulp.dest('./project'))
});
gulp-flatten is really handy for selecting which directories to include or exclude from the final structure.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var flatten = require("gulp-flatten");
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
// keep one parent directory: "Module1", "Module2"
// relative to your glob bae, so first after "project"
.pipe(flatten({ includeParents: 1}))
.pipe(gulp.dest('project'));
});
I want to use gulp to compile SASS for my custom Wordpress plugins.
All plugin folder share same folder structure:
wp-content/plugins/pluginname
assets
dist -
src - scss
GULP TASK
gulp.task('plugin-css', () => {
// Main SASS Style Sheet
const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`)
.pipe(plumber(plumberErrorHandler))
.pipe(sass());
// Merge the two streams and concatenate their contents into a single file
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function(file) {
return file.base;
}));
});
Currently my compiled css file is being output into the same folder as the src sass. How can I output my compiled sass into 'dist' folder?
It is not clear to me what you are trying to do with the merges (so NOTE I simplified those out) but here is something that should help you get to putting your result into a dist folder where you want it to be:
var path = require('path');
var rename = require('gulp-rename');
gulp.task('default', function () {
const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
.pipe(sass())
// return merge(pluginSass)
.pipe(rename(function (file) {
var temp = path.dirname(file.dirname);
console.log('temp = ' + temp);
file.dirname = path.join(temp, "dist");
console.log("file.dirname = " + file.dirname);
}))
.pipe(cssmin())
// .pipe(autoprefixer())
.pipe(gulp.dest("wp-content/plugins"));
});
gulp-rename is useful for these situations and always seems to be easier to use that gulp.dest(function... path manipulation).
Pass the dist folder to the gulp.dest function.
const path = require('path')
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function (file) {
return path.join(file.base, './dist') // ← Put your folder path here
}));
See docs here: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath-options
I have a gulp script which is supposed to copy some dll's in sub directories, if those files have the ending with for instace .Plugin. So I have this structure in my solution:
Now I want to copy all of my assemblies with name ending with .Plugin.dll up to the folder Plugins right under Host. This is my gulp script so far:
gulp.task('pluginsCopy', function (cb) {
gulp.src('.\/**/bin/Debug/*.Plugins')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
As you can see, I dont have that much experience with gulp, but could someone please give me a hint?
Thanks!
You could do something like this:
var gulp = require('gulp');
var bases = {
app: 'MySolution/',
dist: 'MySolution/bin/Debug/Plugins',
};
var paths = {
text: '**/*.dll.txt'
};
// Copy all other files to dist directly
gulp.task('copy', function() {
// Copy txt
gulp.src(paths.text, {cwd: bases.app})
.pipe(gulp.dest(bases.dist));
});
gulp.task('default', ['copy']);
Figured it out:
gulp.task('pluginCopy', function (cb) {
gulp.src('../*Plugin/bin/Debug/*.Plugin.dll')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(rename({ dirname: '' }))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
I am trying to copy all .css files within subfolders to another folder with gulp
gulp.task('copyCss', function () {
gulp.src('/bower_components/*.{css}')
.pipe(gulp.dest('/content/css'));
});
But this does not work, because in bower_components i have a lot of subfolders?
You are not able to access the nested directory. Try using gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('copyCss', function () {
gulp.src('/bower_components/**/*.css')
.pipe(flatten())
.pipe(gulp.dest('/content/css'));
});
I have the next files structure:
modules/
list/
news/
news.scss
login/
login.scss
common/
common.scss
And I want to get next structure using gulp:
modules/
list/
news/
news.scss
news.css
login/
login.scss
login.css
common/
common.scss
Here is part from my gulpfile:
gulp.src("modules/list/*/*.scss")
.pipe(sass())
.pipe(gulp.dest("modules/list/"));
In common.scss there are different variables. It is necessary that variables from common.scss will be used in each module(news.scss, login.scss). How to update my gulpfile that common.scss will be concatenated with each module scss file?
Sounds like a job for stream arrays... here's the solution, please check the comments for what's going on:
var merge = require('merge2');
var glob = require('glob');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('styles', function(done) {
// first, we glob our files like we would with gulp.src
glob('modules/list/**/*.scss', function(er, files) {
// for each of those files we create a new stram
var tasks = files.map(function(file) {
// this gives us the concat name, which is the same
// as the original file's name
var concatStr = file.substr('modules/list/'.length)
// we load common.scss and our file
return gulp.src(['modules/common/common.scss', file])
// concatenate it
.pipe(concat(concatStr))
});
// we merge all our streams
merge(tasks)
// run them through sass
.pipe(sass())
// and save them where we want them
.pipe(gulp.dest('modules/list'));
// ~fin
done();
});
});
You might want to take a look into Sass's #import directive, though.