node-hbsfy not compiling templates with Gulp - gulp

I'm simply trying to compile hbs templates via Browserify and Gulp, but the compilation process fails as soon as any HTML markup is encountered from my hbs file.
I've confirmed this by removing the HTML code within the hbs file, at which point Browserify runs as expected.
Here is a simplified version of my Gulp task:
const _gulp = require('gulp');
const _browserify = require('browserify');
const _remapify = require('remapify');
const _hbsfy = require('hbsfy');
const _vinylSourceStream = require('vinyl-source-stream');
const _vinylBuffer = require('vinyl-buffer');
_gulp.task('js:dev', () => {
return _browserify({entries: './src/js/app.js', debug: true})
.plugin(_remapify, [
{
src: '**/*.hbs', // glob for the files to remap
cwd: './src/markup/components',
expose: 'components' // this will expose './src/markup/components' as 'components'
}
])
.transform(_hbsfy)
.bundle()
.pipe(_vinylSourceStream('app.js'))
.pipe(_vinylBuffer())
.pipe(_gulp.dest('dist'))
});
The hbs template:
<div class="menu"> </div>
The main JS file:
(function (){
const _handlebars = require('hbsfy/runtime');
function init () {
_handlebars.registerPartial('menu', require('components/menu.hbs'));
}
document.addEventListener('DOMContentLoaded', init);
})();
What could be going wrong? It's as if the hbsfy transform isn't running properly...

It seems this issue is actually caused by the remapify plugin. Compilation works as expected using pathmodify instead.
Here is my updated Gulp file:
const _gulp = require('gulp');
const _browserify = require('browserify');
const _pathmodify = require('pathmodify');
const _hbsfy = require('hbsfy');
const _vinylSourceStream = require('vinyl-source-stream');
const _vinylBuffer = require('vinyl-buffer');
_gulp.task('js:dev', () => {
return _browserify({entries: './src/js/app.js', debug: true})
.plugin(_pathmodify, {
mods: [
_pathmodify.mod.dir('components', process.cwd() + '/src/markup/partials/components')
]
})
.transform(_hbsfy)
.bundle()
.pipe(_vinylSourceStream('app.js'))
.pipe(_vinylBuffer())
.pipe(_gulp.dest('dist'))
});

Related

gulp-inject injects nothing

Had to rewrite my gulpfile to gulp 4 but I'm facing problems of gulp-inject injecting nothing.
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var rename = require('gulp-rename');
var cheerio = require('gulp-cheerio');
var inject = require('gulp-inject');
var path = require('path');
gulp.task('svgstore', function () {
var svgs = gulp
.src('static/svg/icons/src/*.svg')
.pipe(svgmin(function (file) {
var prefix = path.basename(file.relative, path.extname(file.relative));
return {
plugins: [{
convertPathData: false
}, {
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
}
}))
.pipe(cheerio(function ($, file) {
$('[fill]').attr('fill', 'currentColor');
}))
.pipe(svgstore({ inlineSvg: true }))
.pipe(gulp.dest('dest'));
function fileContents(filePath, file) {
return file.contents.toString();
}
return gulp
.src('layouts/partials/src/inline-svg.html')
.pipe(inject(svgs, { transform: fileContents }))
.pipe(gulp.dest('layouts/partials'));
});
// Watch asset folder for changes
gulp.task("watch", function () {
var watcher = gulp.watch("static/svg/icons/src/**/*")
watcher.on('all', gulp.series('svgstore'))
})
// Set watch as default task
gulp.task("default", gulp.series("watch"))
I can't figure out why. I tried logging fileContents and it just says [Function: fileContents].
I faced the same issue. When I debugged the gulp-inject package, I figured out that the gulp-inject plugin look up for the startTag and the endTag in the source file/s (in your case, the source file/s is gulp.src('layouts/partials/src/inline-svg.html')) to inject the content, and when I printed out the tags to the console, the result is:
startTag: /<!\-\-\s*inject\b:svg\b\s*\-\->/gi
endTag: /<!\-\-\s*endinject\s*\-\->/gi
Conclusion:
In the src file(i.e., inline-svg.html), insert the comments like below:
<div class="sr-only">
<!-- inject:svg --><!-- endinject -->
</div>
Then, try to run the gulp task and it should work.
Reference: https://github.com/w0rm/gulp-svgstore#inlining-svgstore-result-into-html-body
Gulp Version Used: ^5.0.4

SCSS to Style.css

Long story story, the main developer that worked on this is no longer with the company and I have to take over the project that they built out - So all help would be appreciated with this.
I'm not too familiar with WordPress nor SCSS/Foundation so this will be a learning process. I need to make a css change and deploy it, but it's not showing the changes on my local environment at all.
Here is the knowledge that I have:
- Foundation was used to build this
- SCSS is being converted to Style.css
- https://cdn.site.pl/wp-content/themes/sites/style.css?ver=4.9.10 - There is a version being applied to the end of style.css
Here are the tasks that are in my gulpfile.js:
Here is his documentation:
The default gulp task runs both gulp scripts and gulp styles. To run
this task, navigate in Terminal to the project's htdocs directory, and
type:
gulp
I get this in response:
[14:00:37] Task never defined: default
[14:00:37] To list available tasks, try running: gulp --tasks
Below, I will be providing the whole gulpfile.js file
const argv = require('yargs').argv;
const {
src,
dest,
parallel,
series,
watch
} = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
// Usage in gulp: gulp task-name --theme=theme-name
// Default value is 'f-sites'
const themeName = argv.theme ? argv.theme : 'f-sites';
// GULP CONFIG
const config = {
themeName: themeName,
themeDirectory: `wp-content/themes/${themeName}`
};
// GULP TASKS
// SCSS/CSS TASKS
//==================================================
function sassToCss() {
const nodeModulesSassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/slick-carousel/slick',
'node_modules/jquery-fancybox/source/scss',
'node_modules/font-awesome/scss'
];
const srcPaths = [
`${config.themeDirectory}/scss/theme.scss`,
`${config.themeDirectory}/scss/theme-rtl.scss`
];
return src(srcPaths, { sourcemaps: true })
.pipe(sass({ includePaths: nodeModulesSassPaths }).on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] }))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatLTR() {
const srcFiles = [
`${config.themeDirectory}/css/wordpress.css`,
'./node_modules/animate.css/animate.css',
`${config.themeDirectory}/css/theme.css`,
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatRTL() {
const srcFiles = [
config.themeDirectory + '/css/wordpress.css',
'./node_modules/animate.css/animate.css',
config.themeDirectory + '/css/theme-rtl.css'
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project-rtl.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssMinifyLTR() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project.css`)
.pipe(postcss(plugins))
.pipe(rename('style.css'))
.pipe(dest(config.themeDirectory));
}
function cssMinifyRTL() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project-rtl.css`)
.pipe(postcss(plugins))
.pipe(rename('style-rtl.css'))
.pipe(dest(config.themeDirectory));
}
exports.default = parallel(
series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
),
series(jsConcat, jsMinify)
);
exports.styles = series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
);
exports.scripts = series(jsConcat, jsMinify);
This may be caused by the version of gulp-cli, you can try to upgrade it.
Relevant issues:
https://github.com/gulpjs/gulp-cli/issues/191
https://github.com/gulpjs/gulp/issues/1634

Bundling javascript files to watch with Gulp and Nodeman

I have the start and deploy tasks working the way I want them to but I am trying to figure out how to update public/js/bundle.js when I make a change in app.js so that it can be watched.
Here's what I got so far:
var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var transform = require('vinyl-source-stream');
var browserify = require('browserify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var ios = browserify({
entries:['app.js']
});
const bundle = () => {
process.env.NODE_ENV = 'production';
ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'))
.pipe(streamify(uglify()))
.pipe(rename('bundle-ios.min.js'))
.pipe(gulp.dest('./public/js'));
return ios;
}
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'public/js/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
env: { 'NODE_ENV': 'development' },
});
}
// Start local server and watch bundles.
gulp.task('start', start);
// Build minified versions for prod.
gulp.task('deploy', bundle);
The fix was to watch all the individual javascript component and model files and add a compile task to the start task.
// Bundle and minify for development, use development version of libraries.
const compile = () => {
process.env.NODE_ENV = 'development';
const bundleAndroidDev = ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'));
return bundleIosDev;
}
// Start local server and watch for changes in compiled bundles.
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'apps/appName/components/*', 'apps/appName/models/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
tasks: ['compile'],
env: { 'NODE_ENV': 'development' }
});
}
// Compile bundle's on save.
gulp.task('compile', compile);

Using stream-combiner2 with Gulp 4

I'm trying to use stream-combiner2 with my Gulp 4 task, as advised in the current version of this recipe. However, I always receive:
The following tasks did not complete: build:js
Did you forget to signal async completion?
I've read the excellent information in this answer about Gulp 4 async completion, but I'm having trouble applying that in my task. Here's what I have:
const browserify = require('browserify')
const buffer = require('vinyl-buffer')
const combiner = require('stream-combiner2')
const gulp = require('gulp')
const jsDest = 'static/js'
const jsPath = 'build/js'
const jsSrc = `${jsPath}/**/*.js`
const source = require('vinyl-source-stream')
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')
gulp.task('build:js', function () {
const combined = combiner.obj([
browserify({
entries: `${jsPath}/main.js`,
debug: true
}),
source(`${jsPath}/main.js`),
buffer(),
sourcemaps.init({ loadMaps: true }),
uglify(),
sourcemaps.write('./'),
gulp.dest(jsDest)
])
combined.on('error', console.error.bind(console))
return combined
})
Somehow I missed this fantastic recipe for browserify with multiple sources and destinations. It allowed me to finally get what I was after, including well-formed error handling:
const browserify = require('browserify')
const buffer = require('gulp-buffer')
const combiner = require('stream-combiner2')
const gulp = require('gulp')
const gutil = require('gulp-util')
const jsDest = 'static/js'
const jsSrc = 'build/js/*.js'
const sourcemaps = require('gulp-sourcemaps')
const tap = require('gulp-tap')
const uglify = require('gulp-uglify')
gulp.task('build:js', function () {
const combined = combiner.obj([
gulp.src(jsSrc, { read: false }),
tap(function (file) {
gutil.log('bundling ' + file.path)
file.contents = browserify(file.path, { debug: true }).bundle()
}),
buffer(),
sourcemaps.init({ loadMaps: true }),
uglify(),
sourcemaps.write('./'),
gulp.dest(jsDest)
])
combined.on('error', console.error.bind(console))
return combined
})
After a few hours of hacking away at it, I got fed up with the task not doing what I want at all (see comments to the post) and resorted to the deprecated gulp-browserify. Here's the solution with that plugin, but I'm completely willing to accept an answer that can correctly incorporate stream-combiner2 with browserify itself, because that'd be much better.
const combiner = require('stream-combiner2')
const gulp = require('gulp')
const jsDest = 'static/js'
const jsSrc = 'build/js/*.js'
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')
gulp.task('build:js', function () {
const combined = combiner.obj([
gulp.src(jsSrc),
sourcemaps.init(),
browserify(),
uglify(),
sourcemaps.write('.'),
gulp.dest(jsDest)
])
combined.on('error', console.error.bind(console))
return combined
})

Gulp Browserify with glob and uglify/factor-bundle

I'm currently getting into browserify. I like it so far but before I start using it I want to automate it. Gulp is the build system of my choice.
So what I actually want to do is:
Get js/app/**.js, bundle it to js/bundle/ and extract common dependencies into js/bundle/common.js. In addition uglify everything and add source maps.
Well. The gulp support for browserify kinda seems poor, at least my google researches were pretty disappointing.
Anyway. What I've got so far.
var gulp = require('gulp'),
browserify = require('browserify'),
factor = require('factor-bundle');
// ...
// gulp task
return browserify({
entries: ['js/app/page1.js', 'js/app/page2.js'],
debug: true
})
.plugin(factor, {
o: ['js/bundle/page1.js', 'js/bundle/page2.js']
})
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest('js/bundle/'));
Well this is neither uglifying nor adding sourcemaps and much less using a glob pattern. I can find an official recipe which shows me how to use the pipe to add additional transformations like uglify. But it's only for a single file.
as an outputs parameter to factor-bundle, use streams instead of file paths. You can do whatever you want with the streams then.
var indexStream = source("index.js");
var testStream = source("tests.js");
var commonStream = bundler.plugin('factor-bundle', { outputs: [indexStream, testStream] })
.bundle()
.pipe(source('common.js'));
return merge(indexStream, commonStream, testStream)
.pipe(buffer())
.pipe(sourcemaps.init({ debug: true, loadMaps: true }))
.pipe(uglify())
.pipe(gulp.dest('js/bundle/'))
Thanks to Liero's answer, I got something very similar working. Here's the complete gulpfile:
const gulp = require('gulp');
const browserify = require('browserify');
const factor = require('factor-bundle');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('gulp-buffer');
const merge = require('gulp-merge');
gulp.task('bfb', function () {
const fejs = 'public/javascripts/' // location of source JS
const fejsb = fejs + 'b/'; // location of bundles
const modules = [ // aka entry points
'accounts',
'invoice',
'invoices',
// etc...
];
const inputs = [];
const streams = [];
modules.forEach(function (module) {
inputs.push(fejs + module + '.js');
streams.push(source(module + '.js'));
});
const bundler = browserify(inputs, {});
const commonStream = bundler.plugin(factor, { outputs: streams })
.bundle()
.pipe(source('common.js'));
streams.push(commonStream);
return merge(streams)
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
//.pipe(uglify()) // haven't tested this bit
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(fejsb));
});