Gulpfile.js
installed via npm install --save-dev gulp-load-plugins
var gulp = require('gulp');
// Require all tasks in gulp/tasks, including subfolders
require('require-dir')('./gulp/tasks', {
recurse: true
});
var $ = require('gulp-load-plugins')();
console.log($);
No matter where I declare it, the output will always be {}. I even tried with longer version having the options, still no luck
Using $.gulpif()
gives
TypeError: Object #<Object> has no method 'gulpif'
I even downloaded few starter packs from github but still getting same output. I'm kicking myself for moving from Grunt.
In the package.json, the plugin is saved as "gulp-if": "^1.2.5"
so, I had to change the code $.gulpif() to $.if() since the plugin will strip the names by below logic
var pattern = arrayify(options.pattern || ['gulp-*', 'gulp.*']);
var replaceString = options.replaceString || /^gulp(-|\.)/;
name.replace(replaceString, '');
A silly mistake which took 4 hours of my time.
P.S: I don't think it'll load any plugins without the prefix gulp in it's name.
Related
I have a very simple *.scss compilation task with the use of npm and gulp 4.
It is watched by
const scssWatcher = watch(['scss/*.scss']);
scssWatcher.on('all', function(event, path){ compileSass(path); });
And the compileSass function just
gulp.src(path, {'base' : pathRoot + './scss'})
.pipe(sassInheritance({base: pathRoot + 'scss/'}))
.pipe(sass()).on('error', sass.logError)
.pipe(gulp.dest(pathRoot + 'css'));
The sassInheritance is gulp-better-sass-inheritance module, which makes sure that all files that include the updated file are also updated.
It works, but get slower with every compile.
Restarting the gulp task with this watcher works but is cumbersome.
I have found out that removing the gulp-better-sass-inheritance from the pipeline solves the issue.
I have had this working with gulp 3 with no problem.
There is this thread https://github.com/dlmanning/gulp-sass/issues/467 with same behaving issue from 2016.
Anybody with the same experience? Any help?
These watchers and live-re-loaders are full of bugs.
Just restart it automatically using the shell.
while true; do
timeout 600 gulp run:live:watch whatever...
sleep 0.5
done
I'm pretty new to teamcity and I'm having some difficulties understanding how to pass values to my gulp-config.js, which is used to setup the config to build and deploy a sitecore helix project with gulp msbuild.
I've created a new standard paramater in teamcity, called BuildConfiguration and in my guilpconfig I used it like :
var config = {
Configuration = %BuildConfiguration%,
...
}
Teamcity doesn't seem to be able to replace the variables inside the gulp file. What am I doing wrong?
Thanks a lot :)
Thanks a lot Amy and Chris.
I've used:
var parsedArgs = require("minimist")(process.argv.slice(2));
and in my gulpfile:
...
.pipe(msbuild({
targets: targets,
configuration: parsedArgs.buildConfiguration,
...
and in teamcity, in the advanced area of the gulp task:
--buildConfiguration %buildConfiguration% --otherArg %value%
I already use gulp in my workflow, and I don't currently use webpack or browserify, but it seems that compiling Vue 2.x components requires one or the other, there are no actively-maintained mechanisms for compiling Vue components directly as gulp tasks.
I've searched and can't seem to find a working reference for simply compiling a directory with *.vue components into a single JavaScript file that I can then link from my pages. I just want to create and use some components, I'm not creating SPAs.
Here's what I have:
gulpfile.js
const scriptDestFolder = "\\foo\\";
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const gulp = require("gulp");
const vueify = require('vueify');
gulp.task('vue', function () {
return browserify({
entries: ['./vuecomponents.js'],
transform: [vueify]
})
.bundle()
.pipe(source('vue-bundle.js'))
.pipe(gulp.dest(scriptDestFolder));
});
vuecomponents.js
var Vue = require('vue');
var App = require('./vue/app.vue');
The app.vue file is the same as the example here. I have no intention of actually having an "app" component, I'm just trying to get a sample going, I would replace this with a list of my single-file components.
And here's the result:
Error: Parsing file \\blah\vue\app.vue:
'import' and 'export' may only appear at the top level (14:0)
I'm stumped. I think browserify is trying to parse the raw vue code before compilation, but again, I'm a complete newbie at browserify.
I actually adapted a plugin for this last year, based on vueify but without browserify. I think it does exactly what you want.
You can find it here: https://www.npmjs.com/package/gulp-vueify2
var vueify = require('gulp-vueify2');
gulp.task('vueify', function () {
return gulp.src('components/**/*.vue')
.pipe(vueify(options))
.pipe(gulp.dest('./dist'));
});
For people that don't need to use gulp, there are however much more consistent solutions to compile vue components, such as bili for librairies or parceljs for apps.
Last but not least, if you are ready to enforce some conventions, Nuxt is the perfect way to compile your app with minimal config work and optional server-side rendering built-in.
If I have the files
client/
a.js
bob.js
bad.js
And the gulp task
gulp.task('copy', function() {
return gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js'])
.pipe(gulp.dest('public'));
});
then according to the documentation we should copy a.js and bad.js. However, when I run this with gulp v3.9.1, it only copies a.js.
Is this a known bug? Is there a way to do this?
It's not a bug, the documentation is just wrong. The newest version of gulp is gulp#3.9.1 which uses vinyl-fs#0.3.14. The behavior you're referring to wasn't introduced until vinyl-fs#1.0.0.
In fact, elsewhere the gulp docs explicitly state that glob ordering will be a new feature in gulp#4.0.0:
globs passed to gulp.src will be evaluated in order, which means this is possible gulp.src(['*.js', '!b*.js', 'bad.js']) (exclude every JS file that starts with a b except bad.js)
That means you could simply use to the current development version of gulp (gulpjs/gulp#4.0) and take advantage of the new feature. Note however that gulp 4.x is radically different from gulp 3.x when it comes to defining tasks.
One workaround would be to keep using gulp 3.x for tasks definitions, but use the newest version of vinyl-fs to create vinyl streams:
var vinylFs = require('vinyl-fs');
gulp.task('copy', function() {
return vinylFs.src(['client/*.js', '!client/b*.js', 'client/bad.js'])
.pipe(vinylFs.dest('public'));
});
And if you don't want to do that you can always use merge-stream to combine multiple streams into one stream:
var merge = require('merge-stream');
gulp.task('copy', function() {
return merge(gulp.src(['client/*.js', '!client/b*.js']),
gulp.src(['client/bad.js']))
.pipe(gulp.dest('public'));
});
I'm trying to use gulp as the compiler for my rendr app, but I'm running into the issue of
500 TypeError: template is not a function
at module.exports.Backbone.View.extend.getInnerHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:191:12)
at module.exports.Backbone.View.extend.getHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:198:21)
at ViewEngine.getViewHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:75:15)
at ViewEngine.render (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:22:16)
at View.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/view.js:126:8)
at tryRender (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:639:10)
at EventEmitter.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:591:3)
at ServerResponse.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/response.js:961:7)
at /home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/router.js:87:11
at Object.module.exports.create (/home/longjeongs/thinksquareio.github.io/app/controllers/users_controller.js:5:5)
I couldn't find any examples of compiling rendr-handlebars and handlebars with gulp anywhere and thought I will try getting some help here.
I have read elsewhere that this is caused by different compiler handlebars and client handlebars version, but I believe that I have the correct ones installed. I have these dependencies installed
│ ├─┬ handlebars#2.0.0
├─┬ gulp-handlebars#3.0.1
├─┬ handlebars#2.0.0
├── rendr-handlebars#2.0.1
and my compiledTempaltes.js file shows "compiler":[6,">= 2.0.0-beta.1"]. My gulp task for handlebars does the following;
gulp.task('handlebars:compile', function () {
return gulp.src('./app/templates/**/[!__]*.hbs')
.pipe(plumber())
.pipe(handlebars({ wrapped : true, handlebars: require('handlebars') }))
.pipe(wrap('templates["<%= file.relative.replace(/\\\\/g, "/").replace(/.js$/, "") %>"] = <%= file.contents %>;\n'))
.pipe(concat('compiledTemplates.js'))
.pipe(wrap('module.exports = function(Handlebars){\ntemplates = {};\n<%= contents %>\nreturn templates \n};'))
.pipe(gulp.dest('app/templates/'));
});
I've tried installing different versions of handlebars, rendr-handlebars, and gulp-handlebars without much luck, any help will be much appreciated.
I'm using gulp with my rendr project... I made a sample app that you can check out... https://github.com/jaredrada/rendrjs-demo
There are a few problems with the browser sync which I've fixed locally- so if you copy the entire gulp setup that portion will not work. I will push my edits to the github repo.