GulpJS copy folders and files from folder "foo" to folder "bar" and retain folder structure - gulp

I've got a folder "foo" and folder "bar", and I want to copy and run specific tasks on a specific files files.
Problem: I can copy files, run tasks on them and retain folder structure, but when I move files to folder "bar" it creates a folder "foo" inside folder "bar" and stores all copied files inside it.
Tried: Tried to change base: '.' to base: '../' but that just makes it compile everything to parent folder of bar.
Folder structure:
.
├── foo
│ ├── app.js
│ ├── models
│ ├── public
│ │ ├── images
│ │ └── js
│ ├── routes
│ └── scss
├── bar
│ └── ...
└── gulpfile.js
Gulpjs.js File:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var paths = {
'ssjs' : ['foo/app.js', 'foo/routes/*.js', 'foo/models/*.js'],
'csjs' : ['foo/public/js/*.js'],
'sass' : ['foo/scss/*.scss', 'foo/scss/modules/*.scss'],
'html' : ['foo/public/*.html'],
'build' : 'bar',
'public': 'public'
};
gulp.task('ssjs', function() {
return gulp.src(paths.ssjs, {'base': '.'})
.pipe(uglify({'preserveComments': 'some'}))
.pipe(gulp.dest(paths.build));
});
gulp.task('csjs', function() {
return gulp.src(paths.csjs, {'base': '.'})
.pipe(uglify({'preserveComments': 'some'}))
.pipe(gulp.dest(paths.build));
});
gulp.task('sass', function() {
return gulp.src(paths.sass, {'base': '.'})
.pipe(sass())
.pipe(cssmin())
.pipe(gulp.dest(paths.build));
});
gulp.task('html', function() {
return gulp.src(paths.html, {'base': '.'})
.pipe(htmlmin({'collapseWhitespace': true}))
.pipe(gulp.dest(paths.build));
});
gulp.task('watch', function() {
gulp.watch(paths.ssjs, ['ssjs']);
gulp.watch(paths.csjs, ['csjs']);
gulp.watch(paths.scss, ['sass']);
});
gulp.task('default', [ 'ssjs', 'csjs', 'sass', 'html', 'watch' ]);

Solution: change 'base': '.' to 'base': 'foo'

Related

Gulp - compile sass by folder, and modify parent directories

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

Gulp inject based on file

I have this structure
├── a
│   ├── a.html
│   └── a1.js
│   └── a2.js
├── b
│   ├── b.html
│   └── b1.js
│   └── b2.js
I want to inject the a1.js & a2.js files to a.html. Same case with b. How can I do that with gulp? I cant find what to write on inject()
gulp.task('injectRelative', function () {
gulp.src('./build/**/index.html')
.pipe(inject(gulp.src('./build/**/*.js', {read: false}), {relative: true}))
.pipe(gulp.dest(localConfig.buildFolder));
});
There may be ways to do this entirely within gulp-inject but the following is pretty straightforward:
const gulp = require('gulp');
const inject = require('gulp-inject');
const glob = require("glob");
const path = require('path');
// get your target html files as an array of strings
const htmlTargets = glob.sync("./**/*.html");
gulp.task('default', function () {
htmlTargets.forEach(function (htmlTarget) {
let directory = htmlTarget.split('/')[1];
const sources = gulp.src(path.join('./', directory, '*.js'))
return gulp.src(htmlTarget)
.pipe(inject(sources))
.pipe(gulp.dest('dist'));
});
});

New js file defined in gulpfile.js isn't showing up in dist folder

I am editing an existing gulpfile.js file. The existing javascript files (fabricator.js and toolkit.js) are being copied to the dist/ directory correctly. However, when I add a new file (demo.js) in a new folder inside assets, it doesn't show up inside dist. I've tried "gulp clean", "gulp --dev", "gulp serve", etc.
I'm pretty sure I have it configured properly in gulpfile.js. Have tried everything I can think of. Can anyone see what I'm missing?
Here's my project structure:
├── src
│   ├── assets
│   │   ├── demo
│   │   │   └── scripts
│   │   │   └── demo.js
│   │   ├── fabricator
│   │   │   ├── scripts
│   │   │   │   ├── fabricator.js
│   │   │   │   ├── prism.js
│   │   │   │   └── vendor.js
│   │   │   └── styles
│   │   │   ├── fabricator.scss
│   │   │   ├── partials
│   │   │   └── stylesheets
│   │   └── toolkit
│   │   ├── images
│   │   │   ├── logo.png
│   │   │   └── styleguide-hero.png
│   │   ├── scripts
│   │   │   └── toolkit.js
│   │   └── styles
│   │   └── toolkit.scss
Here's my gulpfile:
const assembler = require('fabricator-assemble');
const browserSync = require('browser-sync');
const csso = require('gulp-csso');
const del = require('del');
const gulp = require('gulp');
const gutil = require('gulp-util');
const gulpif = require('gulp-if');
const imagemin = require('gulp-imagemin');
const prefix = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const reload = browserSync.reload;
const runSequence = require('run-sequence');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const webpack = require('webpack');
const zip = require('gulp-zip');
// configuration
const config = {
dev: gutil.env.dev,
styles: {
browsers: 'last 1 version',
fabricator: {
src: 'src/assets/fabricator/styles/fabricator.scss',
dest: 'dist/assets/fabricator/styles',
watch: 'src/assets/fabricator/styles/**/*.scss',
},
toolkit: {
src: 'src/assets/toolkit/styles/toolkit.scss',
dest: 'dist/assets/toolkit/styles',
watch: 'src/assets/toolkit/styles/**/*.scss',
},
},
scripts: {
fabricator: {
src: './src/assets/fabricator/scripts/fabricator.js',
dest: 'dist/assets/fabricator/scripts',
watch: 'src/assets/fabricator/scripts/**/*',
},
toolkit: {
src: './src/assets/toolkit/scripts/toolkit.js',
dest: 'dist/assets/toolkit/scripts',
watch: 'src/assets/toolkit/scripts/**/*',
},
demo: {
src: './src/assets/demo/scripts/demo.js',
dest: 'dist/assets/demo/scripts',
watch: 'src/assets/demo/scripts/**/*',
}
},
images: {
toolkit: {
src: ['src/assets/toolkit/images/**/*', 'src/favicon.ico'],
dest: 'dist/assets/toolkit/images',
watch: 'src/assets/toolkit/images/**/*',
},
},
templates: {
watch: 'src/**/*.{html,md,json,yml}',
},
dest: 'dist',
};
// clean
gulp.task('clean', del.bind(null, [config.dest]));
// styles
gulp.task('styles:fabricator', () => {
gulp.src(config.styles.fabricator.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(prefix('last 1 version'))
.pipe(gulpif(!config.dev, csso()))
.pipe(rename('f.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.styles.fabricator.dest))
.pipe(gulpif(config.dev, reload({ stream: true })));
});
gulp.task('styles:toolkit', () => {
gulp.src(config.styles.toolkit.src)
.pipe(gulpif(config.dev, sourcemaps.init()))
.pipe(sass({
includePaths: './node_modules',
}).on('error', sass.logError))
.pipe(prefix('last 1 version'))
.pipe(gulpif(!config.dev, csso()))
.pipe(gulpif(config.dev, sourcemaps.write()))
.pipe(gulp.dest(config.styles.toolkit.dest))
.pipe(gulpif(config.dev, reload({ stream: true })));
});
gulp.task('styles', ['styles:fabricator', 'styles:toolkit']);
// scripts
const webpackConfig = require('./webpack.config')(config);
gulp.task('scripts', (done) => {
webpack(webpackConfig, (err, stats) => {
if (err) {
gutil.log(gutil.colors.red(err()));
}
const result = stats.toJson();
if (result.errors.length) {
result.errors.forEach((error) => {
gutil.log(gutil.colors.red(error));
});
}
done();
});
});
// images
gulp.task('images', ['favicon'], () => {
return gulp.src(config.images.toolkit.src)
.pipe(imagemin())
.pipe(gulp.dest(config.images.toolkit.dest));
});
gulp.task('favicon', () => {
return gulp.src('src/favicon.ico')
.pipe(gulp.dest(config.dest));
});
// assembler
gulp.task('assembler', (done) => {
assembler({
logErrors: config.dev,
dest: config.dest,
});
done();
});
gulp.task('zip', () =>
gulp.src(config.dest+'/**/*')
.pipe(zip('simplify-style-guide.zip'))
.pipe(gulp.dest(config.dest))
);
// server
gulp.task('serve', () => {
browserSync({
server: {
baseDir: config.dest,
},
notify: false,
logPrefix: 'FABRICATOR',
});
gulp.task('assembler:watch', ['assembler'], browserSync.reload);
gulp.watch(config.templates.watch, ['assembler:watch']);
gulp.task('styles:watch', ['styles']);
gulp.watch([config.styles.fabricator.watch, config.styles.toolkit.watch], ['styles:watch']);
gulp.task('scripts:watch', ['scripts'], browserSync.reload);
gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch, config.scripts.demo.watch], ['scripts:watch']);
gulp.task('images:watch', ['images'], browserSync.reload);
gulp.watch(config.images.toolkit.watch, ['images:watch']);
});
// default build task
gulp.task('default', ['clean'], () => {
// define build tasks
const tasks = [
'styles',
'scripts',
'images',
'assembler'
];
// run build
runSequence(tasks, () => {
if (config.dev) {
gulp.start('serve');
}
});
});
This is nonstandard (IMO) :
gulp.task('scripts:watch', ['scripts'], browserSync.reload);
gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch, config.scripts.demo.watch], ['scripts:watch']);
I would simplify that to :
gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch,
config.scripts.demo.watch], ['scripts'], browserSync.reload);
I would do the same for the others gulp.task()'s in 'serve'. This follows the example of the browserSync injecting examples.
And then gulp.start is generally frowned upon. It's not even mentioned in the gulp api docs.

Gulp doesn't work when multiple tasks are run

I'm trying to grap my head around gulp. I managed to write gulpfile.js for my basic page scaffolding, but i've problems with running serveral task in order.
I'm trying to generate css/main.css file from scss files, copy it to dist/css/ and then inject my js and css files into index.html (with gulp-inject).
(function (r) {
var gulp = r('gulp');
var del = r('del');
var wiredep = r('wiredep');
var $ = r('gulp-load-plugins')();
// var runSequence = require('run-sequence');
var config = {
css_files: './css/*.css',
sass_files: './scss/*.scss',
main_sass: './scss/main.scss',
main_css: './css/main.css',
css_dir: './css/',
js_files: './js/*.js',
main_js: './js/main.js',
index: [
'./index.html',
'**/index.html',
'!node_modules/**/*.*',
'!bower_components/**/*.*',
],
dist: './dist/',
};
function clean(cb) {
del.sync([
config.css_files,
config.dist + config.css_files,
config.dist + config.js_files,
config.dist + config.index[0],
config.dist + config.index[1],
config.dist + '**/*.map',
]);
cb();
}
gulp.task('clean', function (cb) {
clean(cb);
});
gulp.task('scss', function (cb) {
gulp
.src(config.sass_files)
.pipe($.plumber())
.pipe($.sass())
.pipe(gulp.dest(config.css_dir));
cb();
});
gulp.task('js', function (cb) {
gulp
.src(config.js_files)
.pipe($.concat('main.js'))
.pipe($.sourcemaps.init())
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'js/'));
cb();
});
gulp.task('css', ['scss'], function (cb) {
gulp
.src(config.css_files)
.pipe($.sourcemaps.init())
.pipe($.uglifycss())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'css/'));
cb();
});
function wd(cb) {
wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
cb();
}
gulp.task('wd', function (cb) {
wd(cb);
});
gulp.task('inject-dev', ['wd'], function (cb) {
var src = ['!dist/**/*.*'].concat(config.index);
gulp
.src(src)
.pipe($.inject(gulp.src([config.css_files, config.js_files])))
.pipe(gulp.dest('./'));
cb();
});
gulp.task('inject-dist', ['copy-index'], function (cb) {
var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
var target = gulp.src(config.dist + '**/index.html');
target.pipe($.inject(src, { relative: true }))
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('watch', function (cb) {
gulp.watch(config.sass_files, ['scss']);
cb();
});
gulp.task('copy-index', function (cb) {
gulp
.src(config.index, { base: './' })
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('build-dist', ['clean', 'css', 'js', 'inject-dist']);
})(require);
ATM result of build-dist is generated js/main.js file, copied index.html and about/index.html, generated main.css in dev dir, but not in dist. Files are not injected in dist/index.html aswell.
λ szuja html-scaffold → λ git master* → tree -L 3 -I 'bower_components|node_modules'
.
├── about
│   └── index.html
├── bower.json
├── css
│   └── main.css
├── dist
│   ├── about
│   │   └── index.html
│   ├── index.html
│   └── js
│   ├── main.js
│   └── main.js.map
├── gulpfile.js
├── index.html
├── js
│   ├── main2.js
│   └── main.js
├── LICENSE
├── package.json
├── README.md
└── scss
└── main.scss
Edit:
Looks like gulp doesn't care about waiting for tasks to finish ignoring callback functions:
[16:15:47] Using gulpfile ~/workdir/html-scaffold/gulpfile.js
[16:15:47] Starting 'clean'...
[16:15:47] Finished 'clean' after 15 ms
[16:15:47] Starting 'scss'...
[16:15:47] Finished 'scss' after 75 ms
[16:15:47] Starting 'css'...
[16:15:47] Finished 'css' after 44 ms
[16:15:47] Starting 'js'...
[16:15:47] Finished 'js' after 74 ms
[16:15:47] Starting 'copy-index'...
[16:15:47] Finished 'copy-index' after 4.27 ms
[16:15:47] Starting 'inject-dist'...
[16:15:47] Finished 'inject-dist' after 13 ms
[16:15:47] Starting 'build-dist'...
[16:15:47] Finished 'build-dist' after 9.01 μs
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: scss/main.css
[16:15:47] gulp-debug: 1 item
Works with run-sequence and returning a promise instead of waiting for callback function. I was trying this method before, but somehow managed to pass parameters as an array, so they were running in parallel..
(function (r) {
var gulp = r('gulp');
var del = r('del');
var wiredep = r('wiredep');
var $ = r('gulp-load-plugins')();
var runSequence = require('run-sequence');
var config = {
css_files: './css/*.css',
sass_files: './scss/*.scss',
main_sass: './scss/main.scss',
main_css: './css/main.css',
css_dir: './css/',
js_files: './js/*.js',
main_js: './js/main.js',
index: [
'./index.html',
'**/index.html',
'!node_modules/**/*.*',
'!bower_components/**/*.*',
],
dist: './dist/',
};
function clean(cb) {
del.sync([
config.css_files,
config.dist + config.css_files,
config.dist + config.js_files,
config.dist + config.index[0],
config.dist + config.index[1],
config.dist + '**/*.map',
]);
cb();
}
gulp.task('clean', function (cb) {
clean(cb);
});
gulp.task('scss', function () {
return gulp
.src(config.sass_files)
.pipe($.plumber())
.pipe($.sass())
.pipe($.debug())
.pipe(gulp.dest(config.css_dir));
});
gulp.task('js', function () {
return gulp
.src(config.js_files)
.pipe($.concat('main.js'))
.pipe($.sourcemaps.init())
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'js/'));
});
gulp.task('css', ['scss'], function () {
return gulp
.src(config.css_files)
.pipe($.sourcemaps.init())
.pipe($.uglifycss())
.pipe($.sourcemaps.write('./'))
.pipe($.debug())
.pipe(gulp.dest(config.dist + 'css/'));
});
function wd(cb) {
wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
cb();
}
gulp.task('wd', function (cb) {
wd(cb);
});
gulp.task('inject-dev', ['wd'], function () {
var src = ['!dist/**/*.*'].concat(config.index);
return gulp
.src(src)
.pipe($.inject(gulp.src([config.css_files, config.js_files])))
.pipe($.debug())
.pipe(gulp.dest('./'));
});
gulp.task('inject-dist', ['copy-index'], function () {
var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
var target = gulp.src(config.dist + '**/index.html');
return target.pipe($.inject(src, { relative: true }))
.pipe($.debug())
.pipe(gulp.dest(config.dist));
});
gulp.task('watch', function (cb) {
gulp.watch(config.sass_files, ['scss']);
cb();
});
gulp.task('copy-index', function () {
return gulp
.src(config.index, { base: './' })
.pipe(gulp.dest(config.dist));
});
gulp.task('build-dist', function (cb) {
runSequence('clean', 'js', 'css', 'inject-dist', cb);
});
})(require);

TypeError: glob pattern string required

I'm trying to compile sass using gulp-ruby-sass but I'm getting TypeError: glob pattern string required.
This is what my gulpfile.js looks like:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
var paths = {
sassSrcPath: ['Content/css/**/*.scss'],
sassDestPath: ['build/css/'],
sassImportsPath: ['Content/styleguide/']
};
// Styles Task
gulp.task('styles', function () {
gulp.src(paths.sassSrcPath)
.pipe(sass({
style: 'compressed',
loadPath: [paths.sassImportsPath]
}))
.pipe(gulp.dest(paths.sassDestPath));
});
// Watch Task
gulp.task('watch', function () {
gulp.watch(paths.sassSrcPath, ['styles']);
});
gulp.task('default', ['styles', 'watch']);
Here is my folder structure:
├── Content
│ ├── css
│ │ ├── partials
│ │ │ └─_icons.scss
│ │ ├── main.css.scss
│ │ └── styleguide.css.scss
│ └── styleguide
│ ├── css
│ │ └─ vendor
│ │ └─ // Bunch of other folders that contain .sass files
│ └── // Other .sass files
└── gulpfile.js
I'm fresh new to Gulp and I haven't used Grunt either so excuse me if I made a trivial mistake.
Looking at the docs, it doesn't seem like you're supposed to pipe into gulp-ruby-sass, but rather call it directly like that :
gulp.task('styles', function () {
return sass(paths.sassSrcPath, {
style: 'compressed',
loadPath: [paths.sassImportsPath]
})
.pipe(gulp.dest(paths.sassDestPath));
});