Develop Reference

Create a for loop for several file names in a Gulp.js 4 function

I'm currently trying to use one single svg sprite per page, so that it only loads the necessary svg's for each separate page. Is currently working, but I want to create an array so that the task get's called for N pages that I want.
I currently have this structure in gulpfile.js (vers 4):
var autoprefixer = require('autoprefixer'),
browsersync = require('browser-sync').create(),
cssnano = require('cssnano'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
newer = require('gulp-newer'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
svgSprite = require('gulp-svg-sprite');
//Create SVG's into one single image file
function svgs(){
return gulp
.src('app/images/src/pageName/*')
.pipe(svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: './',
layout: 'diagonal',
sprite: 'images/dist/pageName/sprite.svg',
bust: false,
render: {
scss: {
dest: 'sass/modules/sprites/_pageName.scss',
template: 'app/sass/modules/sprites/_pageNameTemplate.scss'
}
}
}
},
variables: {
mapname: 'icons'
}
}))
.pipe(gulp.dest('app/'));
}
exports.svgs = svgs;
The idea is to create an array with the page names and do a for loop:
var pages = ['page1', 'page2',...];
function svgs(){
for (var i = 0; i < pages.length; i++) {
return gulp
.src('app/images/src/' + pages[i] + '/*').........
}
and then in the console just call the task, but the return only does it for one iteration, anyone have had this before?
Thanks !

Try glob.sync it returns an array:
const glob = require('glob');
const pageArray = glob.sync('path/to/your/*.pages');
function svgs(done) {
pageArray.forEach( page => {
return gulp.src(page)
...
};
done();
}

gulp merge multiple JS into one

I have a task gulp dev that should merge a array of JS files into one in dist/js however I cant seem to get the gulp command to create the file dist/js, Can anyone see where I have gone wrong been at this 9 hrs now.
Thanks
Gulp file
gulp.task("dev", function () {
// set the dev config (cache in utils.js)
utils.setConfig({
env: "dev",
watch: true,
notify: true,
tasks: ["js", "css", "copy", "bower", "svg-sprite"]
});
// build with this config
utils.build();
});
then ...
task/js
var gulp = require("gulp"),
utils = require("./utils"),
config = utils.loadConfig(),
gulpif = require("gulp-if"),
fs = require("fs"),
uglify = require("gulp-uglify"),
sourcemaps = require("gulp-sourcemaps"),
browserify = require("browserify"),
shim = require("browserify-shim"),
through2 = require("through2"),
babelify = require("babelify"),
minify = require('gulp-minify'),
replaceName = require('gulp-replace-name');
// dev/default settings
utils.setTaskConfig("js", {
default: {
// Pass array instead of single file!
src: [
config.root + "/js/index.js",
config.root + "/js/owlCarousel.js",
config.root + "/js/search/search.js",
// Angular 1.x doesn't play well with CommonJS modules :(
config.root + "/js/search/angular-1.5.1.min.js",
config.root + "/js/search/angular-animate-1.5.1.min.js",
config.root + "/js/search/angular-sanitize-1.5.1.min.js"
],
dest: config.dest + "/js",
// js uglify options, to skip, set value to false or omit entirely
// otherwise, pass options object (can be empty {})
uglify: false,
// browserify options
browserify: {
debug: true // enable sourcemaps
}
},
prod: {
browserify: {},
// uglify javascript for production
uglify: {}
}
});
// register the watch
utils.registerWatcher("js", [
config.root + "/js/**/*.js",
config.root + "/js/**/*.jsx"
]);
/* compile application javascript */
gulp.task("js", function(){
var js = utils.loadTaskConfig("js");
// for browserify usage, see https://medium.com/#sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623
// ^^ we can't use vinyl-transform anymore because it breaks when trying to use b.transform()
// https://github.com/sogko/gulp-recipes/tree/master/browserify-vanilla
var browserifyIt = through2.obj(function (file, enc, callback){
// https://github.com/substack/node-browserify/issues/1044#issuecomment-72384131
var b = browserify(js.browserify || {}) // pass options
.add(file.path) // this file
.transform(babelify)
.transform(shim);
b.bundle(function(err, res){
if (err){
callback(err, null); // emit error so drano can do it's thang
}
else {
file.contents = res; // assumes file.contents is a Buffer
callback(null, file); // pass file along
}
});
});
return gulp.src(js.src)
.pipe(utils.drano())
.pipe(browserifyIt)
.pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
.pipe(gulpif((js.uglify), uglify(js.uglify)))
.pipe(minify(({
ignoreFiles: ['*.min.js', 'search.js']
})))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(js.dest));
});
gulp.src([
'./dist/js/*.min.js',
'./dist/js/*-min.js',
'./dist/js/amcharts.js',
'./dist/js/amstock.js',
'./dist/js/table-childssorter.js',
'./dist/js/serial.js',
'./dist/js/vendor.js',
'./dist/js/jquery-3.1.1.js',
'./dist/js/jquery.tablesorter.js',
'./dist/js/search.js'
])
.pipe(replaceName(/\-min.js/g, '.js'))
.pipe(gulp.dest('./dist/minified/js'));

let and const problems with visual studio and chrome

I have a strange problem, google chrome won't read es6, like let or const or the new way to define a function inside an object.
If i used var it will work fine:
var cat = {
name: 'meow',
age: 5,
eyeColor: 'black'
}
If i used let or const it won't work:
let cat = {
name: 'meow',
age: 5,
eyeColor: 'black'
}
It gives me an error:
cat is not defined
Ok i figured something out, first of all here is my folder structure :
build
assets
js
app.js
vendors.js
source
js
app.js
vendors
gulpfile.js
I am writing all my code inside the source folder and gulp compile it to the build folder, here is my gulp file ( sorry its very long ) :
// --------------------------------------------
// Dependencies
// --------------------------------------------
var autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
del = require('del'),
gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
images = require('gulp-imagemin'),
browserSync = require('browser-sync').create();
// paths
var styleSrc = 'source/sass/**/*.sass',
styleDest = 'build/assets/css/',
htmlSrc = 'source/',
htmlDest = 'build/',
vendorSrc = 'source/js/vendors/',
vendorDest = 'build/assets/js/',
scriptSrc = 'source/js/*.js',
scriptDest = 'build/assets/js/';
// --------------------------------------------
// Stand Alone Tasks
// --------------------------------------------
// Compiles all SASS files
gulp.task('sass', function() {
gulp.src('source/sass/**/*.sass')
.pipe(plumber())
.pipe(sass({
style: 'compressed'
}))
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest('build/assets/css'));
});
gulp.task('images', function() {
gulp.src('source/img/*')
.pipe(images())
.pipe(gulp.dest('build/assets/img'));
});
// Uglify js files
gulp.task('scripts', function() {
gulp.src('source/js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/assets/js'));
});
//Concat and Compress Vendor .js files
gulp.task('vendors', function() {
gulp.src(
[
'source/js/vendors/jquery.min.js',
'source/js/vendors/*.js'
])
.pipe(plumber())
.pipe(concat('vendors.js'))
.pipe(uglify())
.pipe(gulp.dest('build/assets/js'));
});
// Watch for changes
gulp.task('watch', function(){
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./build"
},
notify: false
});
gulp.watch(styleSrc,['sass']);
gulp.watch(scriptSrc,['scripts']);
gulp.watch(vendorSrc,['vendors']);
gulp.watch(['build/*.html', 'build/assets/css/*.css', 'build/assets/js/*.js', 'build/assets/js/vendors/*.js']).on('change', browserSync.reload);
});
// use default task to launch Browsersync and watch JS files
gulp.task('default', [ 'sass', 'scripts', 'vendors', 'watch'], function () {});
When i write my code inside the build js file directly its working fine, but if i am writing my js inside the source folder it will only compile var, but if i tried let or const it won't

Using let has changed the scope of the variable cat. The error is not being generated at the declaration (bring up the Chrome console and paste your example to prove this to yourself).
The MDN documentation for let says:
The let statement declares a block scope local variable
Compare the given examples. Here's let:
let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 1
And here's var:
var x = 1;
if (x === 1) {
var x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 2
Notice the difference in the first and second outputs from each example? In short, the error is actually in code that has not been shared yet. This example highlights the difference:
if (true) {
var myVariable = 1;
let myOtherVariable = 2;
}
console.log(myVariable); //Outputs '1'
console.log(myOtherVariable); //Fails

Alright i fixed it just in case anybody had this problem all you have to do is add babel to the watch task like so :
gulp.task('scripts', function() {
return gulp.src('source/js/*.js')
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(plumber())
.pipe(gulp.dest('build/assets/js'))
});

How can I specify the gulpfile to use?

So I have two gulpfiles in this site I'm working on, one for the whole project which only watches and compiles sass and one inside a Foundation Emails project which is kept in a subdirectory in the project. When I try running any scripts or gulp tasks inside this Foundation subdirectory it runs the default task of the outer gulpfile. How can I make it so that when I'm in the subdirectory it only uses that gulpfile?
Outermost gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('default', function() {
return watch('ps_app/public/sass/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('ps_app/public/css/custom'));
});
gulp.task('sass', function() {
return gulp.src('ps_app/public/sass/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('ps_app/public/css/custom'));
});
Foundation Emails Subdirectory gulpfile:
import gulp from 'gulp';
import plugins from 'gulp-load-plugins';
import browser from 'browser-sync';
import rimraf from 'rimraf';
import panini from 'panini';
import yargs from 'yargs';
import lazypipe from 'lazypipe';
import inky from 'inky';
import fs from 'fs';
import siphon from 'siphon-media-query';
import path from 'path';
import merge from 'merge-stream';
import beep from 'beepbeep';
import colors from 'colors';
const $ = plugins();
// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);
// Declar var so that both AWS and Litmus task can use it.
var CONFIG;
// Build the "dist" folder by running all of the above tasks
gulp.task('build',
gulp.series(clean, pages, sass, images, inline));
// Build emails, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));
// Build emails, then send to litmus
gulp.task('litmus',
gulp.series('build', creds, aws, litmus));
// Build emails, then zip
gulp.task('zip',
gulp.series('build', zip));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf('dist', done);
}
// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
return gulp.src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
helpers: 'src/helpers'
}))
.pipe(inky())
.pipe(gulp.dest('dist'));
}
// Reset Panini's cache of layouts and partials
function resetPages(done) {
panini.refresh();
done();
}
// Compile Sass into CSS
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error', $.sass.logError))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
// Copy and compress images
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.imagemin())
.pipe(gulp.dest('./dist/assets/img'));
}
// Inline CSS and minify HTML
function inline() {
return gulp.src('dist/**/*.html')
.pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
.pipe(gulp.dest('dist'));
}
// Start a server with LiveReload to preview the site in
function server(done) {
browser.init({
server: 'dist'
});
done();
}
// Watch for file changes
function watch() {
gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(resetPages, sass, pages, inline, browser.reload));
gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
}
// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);
var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
.pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
});
return pipe();
}
// Ensure creds for Litmus are at least there.
function creds(done) {
var configPath = './config.json';
try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
catch(e) {
beep();
console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
process.exit();
}
done();
}
// Post images to AWS S3 so they are accessible to Litmus test
function aws() {
var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
var headers = {
'Cache-Control': 'max-age=315360000, no-transform, public'
};
return gulp.src('./dist/assets/img/*')
// publisher will add Content-Length, Content-Type and headers specified above
// If not specified it will set x-amz-acl to public-read by default
.pipe(publisher.publish(headers))
// create a cache file to speed up consecutive uploads
//.pipe(publisher.cache())
// print upload updates to console
.pipe($.awspublish.reporter());
}
// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
return gulp.src('dist/**/*.html')
.pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
.pipe($.litmus(CONFIG.litmus))
.pipe(gulp.dest('dist'));
}
// Copy and compress into Zip
function zip() {
var dist = 'dist';
var ext = '.html';
function getHtmlFiles(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
var fileExt = path.join(dir, file);
var isHtml = path.extname(fileExt) == ext;
return fs.statSync(fileExt).isFile() && isHtml;
});
}
var htmlFiles = getHtmlFiles(dist);
var moveTasks = htmlFiles.map(function(file){
var sourcePath = path.join(dist, file);
var fileName = path.basename(sourcePath, ext);
var moveHTML = gulp.src(sourcePath)
.pipe($.rename(function (path) {
path.dirname = fileName;
return path;
}));
var moveImages = gulp.src(sourcePath)
.pipe($.htmlSrc({ selector: 'img'}))
.pipe($.rename(function (path) {
path.dirname = fileName + '/assets/img';
return path;
}));
return merge(moveHTML, moveImages)
.pipe($.zip(fileName+ '.zip'))
.pipe(gulp.dest('dist'));
});
return merge(moveTasks);
}
The specific tasks I run are npm start and npm run build which do these tasks in my package.json in the same subdirectory as the Foundation Emails:
"scripts": {
"start": "gulp",
"build": "gulp --production",
"zip": "gulp zip --production",
"litmus": "gulp litmus --production"
},
Thank you for any help you can give.

You can use the --gulpfile CLI parameter to manually specify the gulpfile:
--gulpfile <gulpfile path> will manually set path of gulpfile. Useful if you have multiple gulpfiles. This will set the CWD to the gulpfile directory as well
Source

Gulp bower:scss not working including bower_components files

I have an issue with wiredep: In my index.scss file, I have this block at the top:
/**
* Do not remove this comments bellow. It's the markers used by wiredep to inject
* sass dependencies when defined in the bower.json of your dependencies
*/
// bower:scss
// endbower
Also, I have installed a bower dependency, let's say color-dependency, which contains a couple files *.scss
The problem is that I can't see those files injected in my index.scss
Here is my gulp task for styles
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var _ = require('lodash');
gulp.task('styles', function () {
var sassOptions = {
style: 'expanded'
};
var injectFiles = gulp.src([
path.join(conf.paths.src, '/app/**/*.scss'),
path.join('!' + conf.paths.src, '/app/index.scss')
], { read: false });
var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(conf.paths.src + '/app/', '');
return '#import "' + filePath + '";';
},
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false
};
return gulp.src([
path.join(conf.paths.src, '/app/index.scss')
])
.pipe($.inject(injectFiles, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe($.sourcemaps.init())
.pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
.pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')))
.pipe(browserSync.reload({ stream: true }));
});

I also had the same problem using the gulp generator but only with bootstrap-sass. I added the following to get bootstrap to work:
conf.js
exports.wiredep = {
exclude: [/\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
directory: 'bower_components'
};
bower.json
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
"assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
"assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
"assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
"assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
]
}
},