I'm trying to setup a Cordova develop/deployment chain using Gulp. I ended with this gulpfile.js, but I'm not really satisfied since I need to kill "gulp watch" task in order to run "gulp deploy" task.
var gulp = require('gulp'),
gutil = require('gulp-util'),
exec = require('gulp-exec');
var spawn = require('child_process').spawn;
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
/**
* Config ogj
*/
var config = {
jsDir: 'www/assets/js',
jsDirBrowser: 'platforms/browser/www/assets/js',
production: !!gutil.env.production
};
/**
* Automatically run 'cordova prepare browser' after any modification
* into the www directory - really useful for development/deplyment purpose
*
* #see watch task
*/
gulp.task('prepare', function () {
gutil.log('Prepare browser');
var options = {
continueOnError: false, // default = false, true means don't emit error event
pipeStdout: false, // default = false, true means stdout is written to file.contents
customTemplatingThing: "test" // content passed to gutil.template()
};
var reportOptions = {
err: true, // default = true, false means don't write err
stderr: true, // default = true, false means don't write stderr
stdout: true // default = true, false means don't write stdout
}
return gulp.src('./**/**')
.pipe(exec('cordova prepare browser', options))
.pipe(exec.reporter(reportOptions));
});
/**
* Watch for changes in www
*/
gulp.task('watch', function () {
gulp.watch('www/**/*', ['prepare']);
});
/**
* Default task
*/
gulp.task('default', ['prepare']);
/**
* Javascript production depolyment.
*/
gulp.task('deploy-js', function () {
gutil.log('Deploy');
return gulp.src(config.jsDir + '/*.js')
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest(config.jsDirBrowser));
});
/**
* Production deployment
* To be run before uploading files to the server with no gulp instaces running
*/
gulp.task('deploy', ['deploy-js']);
Which could be a best practice for develop and deply a Cordova project using Gulp?
[EDIT]
I think the problem is in the "prepare" task: it never returns, probably due a gulp-exec issue, but I really don't know how to debug it.
From what I've understood the only issue is that gulp command does not return control to you for you to execute gulp deploy
the prepare task never returns because of the behavior of the watch feature - you've passed control to watch the files so it will return only when you stop watching. It is the expected behavior and not a probably due a gulp-exec issue.
The solution I would adopt in this situation is to run the gulp task in the background, using the native nohup gulp & so that the watching is moved to the background for me to execute deploy.
Related
I want to implement very simple chain of tasks in my project by Gulp:
Copy all files;
Replace some placeholders with values;
Minify some
files;
And for these purposes I have created gulpfile with such main task:
gulp.task(tasks.build, [
tasks.simplyCopy,
tasks.minifyXml,
tasks.minifyJs,
tasks.subst]);
It's a pretty simple and self describable.
Below I wrote full gulpfile.js:
var gulp = require('gulp');
var prettyData = require('gulp-pretty-data');
var uglify = require('gulp-uglify');
var renvy = require('gulp-renvy');
var tasks = {
simplyCopy: "simply-copy",
minifyXml: "minify-xml",
minifyJs: "minify-js",
subst: "renvy-subst",
build: "build"
};
// Collection of tasks
gulp.task(tasks.build, [tasks.simplyCopy, tasks.minifyXml, tasks.minifyJs,
tasks.subst]);
// By this task sources simply copy to the destination
var destination = 'dist/';
gulp.task(tasks.simplyCopy, function () {
gulp.src(['Source/**/*.*', '!Source/www/res/strings/*.*'], {base:
'Source/www'})
.pipe(gulp.dest(destination));
});
var stringsDestPath = 'dist/res/strings/';
var stringSrcPath = 'Source/www/res/strings/';
// By this task some xml files minify
gulp.task(tasks.minifyXml, [tasks.simplyCopy], function() {
gulp.src(stringSrcPath + '*.xml')
.pipe(prettyData({
type: 'minify',
preserveComments: true,
extensions: {
'xlf': 'xml',
'svg': 'xml'
}
}))
.pipe(gulp.dest(stringsDestPath))
});
var placeholder = {
'%version%': {'prod':'010.00', 'dev':'010.00'}
};
// By this task in some files placeholders replaces with value
gulp.task(tasks.subst, [tasks.minifyXml, tasks.minifyJs], function(){
return gulp.src(stringsDestPath + '*.*')
.pipe(renvy(placeholder, 'dev'))
.pipe(gulp.dest(stringsDestPath));
});
// By this task some js files minify
gulp.task(tasks.minifyJs, [tasks.simplyCopy], function () {
gulp.src(stringSrcPath + '*.js')
.pipe(uglify())
.pipe(gulp.dest(stringsDestPath))
});
But I have such unexpected behavior:
replacing of placeholders is not happening, but it's executes.
[16:29:51] Using gulpfile C:\PDDirectory\Workspace\src\some_workbench\User_Part\gulpfile.js
[16:29:51] Starting 'simply-copy'...
[16:29:51] Finished 'simply-copy' after 17 ms
[16:29:51] Starting 'minify-xml'...
[16:29:51] Finished 'minify-xml' after 7.49 ms
[16:29:51] Starting 'minify-js'...
[16:29:51] Finished 'minify-js' after 5.84 ms
[16:29:51] Starting 'renvy-subst'...
[16:29:51] Finished 'renvy-subst' after 28 ms
[16:29:51] Starting 'build'...
[16:29:51] Finished 'build' after 5.66 ?s
Task tasks.subst executed sepparetly works fine, but in a chain with other tasks, I see results of executing copy and minify only.
Why so?
Place tasks.subst has the sole dependency for tasks.build
gulp.task(tasks.build, [tasks.subst]);
Since tasks.subst requires all the others, the ordering should be correct and adding all the other tasks may lead to ordering problems.
From the gulp.task documentation:
Note: Are your tasks running before the dependencies are complete?
Make sure your dependency tasks are correctly using the async run
hints: take in a callback or return a promise or event stream.
To ensure that a task dependencies are fulfilled before executing it, Gulp needs each task to return a stream or a promise, or call the task function callback parameter.
In your case, the following task should just return the stream:
tasks.minifyXml
tasks.minifyJs
tasks.simplyCopy
For example:
gulp.task(tasks.minifyXml, [tasks.simplyCopy], function(done) {
// just return the task stream here
return gulp.src(stringSrcPath + '*.xml')
.pipe(prettyData({
// ...
}))
.pipe(gulp.dest(stringsDestPath));
});
or using the callback when it's not possible to return a stream:
gulp.task('somename', function(done) {
// async function which does not return a stream like other gulp functions
getFilesAsync(function(err, res) {
// pass any errors to the callback
if (err) return done(err);
var stream = gulp.src(res)
.pipe(minify())
.pipe(gulp.dest('build'))
.on('end', done); // use the callback when it's done
});
});
Update: Seems like this is a bug in gulp-protractor. On their github page they filed it as a bug and will take a look into it. Source: https://github.com/mllrsohn/gulp-protractor/issues/64
Only possible workaround you can do until the bug is resolved is change the directory of your project to something that doesn't include spaces.
So I'm trying to get an Aurelia project started including front end unit testing. Here is where the problem starts. When I try to run the e2e gulp task I get the following error:
[10:45:44] using gulpfile ~\Documents\Visual Studio 2013\Projects\ProjectX\ProjectX\gulpfile.js
[10:45:44] Starting 'build-e2e'...
[10:45:44] Finished 'build-e2e' after 207 ms
[10:45:44] Starting 'e2e'...
'C:\Users\jorisd\Documents\Visual' is not recognized as an internal or external command, operable program or batch file.
C:\Users\jorisd\Documents\Visual Studio 2013\Projects\ProjectX\ProjectX\build\tasks\e2e.js:34
.on('error', function(e) {throw e; });
Error: protractor exited with code 1
Basically it's the highlighted code that has the problem. Since my path includes a space, it'll stop there for some reason.
Here's how my e2e.js file looks like right now:
var gulp = require('gulp');
var paths = require('../paths');
var to5 = require('gulp-babel');
var plumber = require('gulp-plumber');
var webdriverUpdate = require('gulp-protractor').webdriver_update;
var webdriverStandalone = require("gulp-protractor").webdriver_standalone;
var protractor = require('gulp-protractor').protractor;
// for full documentation of gulp-protractor,
// please check https://github.com/mllrsohn/gulp-protractor
gulp.task('webdriver-update', webdriverUpdate);
gulp.task('webdriver-standalone', ['webdriver-update'], webdriverStandalone);
// transpiles files in
// /test/e2e/src/ from es6 to es5
// then copies them to test/e2e/dist/
gulp.task('build-e2e', function() {
return gulp.src(paths.e2eSpecsSrc)
.pipe(plumber())
.pipe(to5())
.pipe(gulp.dest(paths.e2eSpecsDist));
});
// runs build-e2e task
// then runs end to end tasks
// using Protractor: http://angular.github.io/protractor/
gulp.task('e2e', ['build-e2e'], function(cb) {
return gulp.src(paths.e2eSpecsDist + '/*.js')
.pipe(protractor({
configFile: '/protractor.conf.js',
args: ['--baseUrl', 'http://127.0.0.1:9000']
}))
.on('end', function() { process.exit(); })
.on('error', function(e) { throw e; });
});
The problem is situating in the e2e task with the configFile option.
I tried change the line into the following:
configFIle: __dirname + '/protractor.conf.js',
But this aswell without result. If any of you know a workaround for including spaces in the configFile path, I'll be happy to hear it.
For me its working fine.
var angularProtractor = require('gulp-angular-protractor');
gulp.task('test', function (callback) {
gulp
.src([__dirname+'/public/apps/adminapp/**/test/**_test.js'])
.pipe(angularProtractor({
'configFile': 'public/apps/adminapp/app.test.config.js',
'debug': false,
'args': ['--suite', 'adminapp'],
'autoStartStopServer': true
}))
.on('error', function(e) {
console.log(e);
})
.on('end',callback);
});
I was looking at this browser sync recipe which is a gulpfile configuration that works with jade, sass and browser sync, I don't care about sass so to simplify I modified the code a little:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var jade = require('gulp-jade');
var reload = browserSync.reload;
/**
* Compile jade files into HTML
*/
gulp.task('templates', function() {
return gulp.src('./app/*.jade')
.pipe(jade())
.pipe(gulp.dest('./dist/'));
});
/**
* Important!!
* Separate task for the reaction to `.jade` files
*/
gulp.task('jade-watch', ['templates'], reload);
/**
* Serve and watch the jade files for changes
*/
gulp.task('default', ['templates'], function () {
browserSync({server: './dist'});
gulp.watch('./app/*.jade', ['jade-watch']);
});
What I don't understand is this comment:
/**
* Important!!
* Separate task for the reaction to `.jade` files
*/
Why is this important? Why not just do this?
/**
* Compile jade files into HTML
*/
gulp.task('templates', function() {
return gulp.src('./app/*.jade')
.pipe(jade())
.pipe(gulp.dest('./dist/'))
.pipe(reload({stream: true}));
});
/**
* Serve and watch the jade files for changes
*/
gulp.task('default', ['templates'], function () {
browserSync({server: './dist'});
gulp.watch('./app/*.jade', ['templates']);
});
You might have figured this out by now; but in case anyone else comes along wondering the same thing (as I did): by setting the 'templates' task as a dependency of 'jade-watch' you ensure it has completed before triggering reload.
We are trying to use only nodeJS with minimal dependencies to other packages, the challenge we now encounter is HandelbarsJS. We found a package, Assemble who can generate html for us. Only, it is very very slow, about 3 seconds each time, of these 3 seconds, there are 2,5 / 2,7 seconds of the next line:
var assemble = require('assemble');
Our package.json script section:
"scripts": {
"build:handlebars": "node scripts/handlebars.js",
"watch:handlebars": "nodemon --watch assets --exec \"npm run build:handlebars\"" }
the script/handlebars.js file
#! /usr/bin/env node
var assemble = require('assemble');
var extname = require('gulp-extname');
console.log(Date.now() - start);
assemble.data('assets/templates/data/*.json');
assemble.layouts('assets/templates/layouts/*.hbs');
assemble.partials('assets/templates/partials/*.hbs');
assemble.src('assets/templates/*.hbs', { layout: 'default' })
.pipe(extname())
.pipe(assemble.dest('build/'));
Each time, when we save a .hbs file, Nodemon restart and the external javascript file will be called.
How can we ensure that 'require' get called only once, or whether they remain in memory?
Thank you!
Since you want to accomplish using this with assemble, but without gulp, I recommend chokidar.
npm install chokidar --save
Now you can require chokidar like this:
var chokidar = require('chokidar');
Then define a little helper that runs handler whenever something in a pattern changes:
function watch(patterns, handler) {
chokidar.watch(patterns, {
ignoreInitial: false
}).on('add', handler).on('change', handler).on('unlink', handler);
}
Now we can alter the script like this:
#! /usr/bin/env node
var assemble = require('assemble');
var extname = require('gulp-extname');
var chokidar = require('chokidar');
console.log(Date.now() - start);
assemble.data('assets/templates/data/*.json');
assemble.layouts('assets/templates/layouts/*.hbs');
assemble.partials('assets/templates/partials/*.hbs');
// Enable --watch command line for Chokidar, otherwise, just run!
if (process.argv.pop() === '--watch') {
watch('assets', runOnce);
} else {
runOnce();
}
function watch(patterns, handler) {
chokidar.watch(patterns, {
ignoreInitial: false
}).on('add', handler).on('change', handler).on('unlink', handler);
}
function runOnce() {
assemble.src('assets/templates/*.hbs', { layout: 'default' })
.pipe(extname())
.pipe(assemble.dest('build/'));
}
And instead of nodemon, this will keep your script alive and running. So, in npm, you want this:
"scripts": {
"build:handlebars": "node scripts/handlebars.js",
"watch:handlebars": "node scripts/handlebars.js --watch"
}
Whenever a file changes, the script will now run, without re-invoking from scratch.
The beta version of assemble is based on gulp and has a cli that you can use just like you would use gulp, but if you don't want to use the cli and use npm scripts instead, you can do something based on #roel-van-uden's answer without chokidar and also be able to reload the actual assets (e.g. data, layouts, partials)
#! /usr/bin/env node
var start = Date.now();
var assemble = require('assemble');
var extname = require('gulp-extname');
assemble.task('assets', function () {
console.log(Date.now() - start);
assemble.data('assets/templates/data/*.json');
assemble.layouts('assets/templates/layouts/*.hbs');
assemble.partials('assets/templates/partials/*.hbs');
return assemble.src('assets/templates/*.hbs', { layout: 'default' })
.pipe(extname())
.pipe(assemble.dest('build/'));
});
assemble.task('watch', ['assets'], function () {
assemble.watch('./assets/**/*.*', ['assets]');
});
// Enable --watch command line
if (process.argv.pop() === '--watch') {
assemble.run(['watch']);
} else {
assemble.run(['assets']);
}
I want to run Karma a couple of times with different preprocessors. Based on the failures, the karma exec listens to --preprocessors on the commandline, but I can't get it set up properly.
The following all return the same error.
karma start --single-run web-app/karma.conf.js --preprocessors "{\"../grails-app/assets/javascripts/**/!(lib)/**/*.js\": \"jshints\"}"
karma start --single-run web-app/karma.conf.js --preprocessors {"../grails-app/assets/javascripts/**/!(lib)/**/*.js": "jshints"}
karma start --single-run web-app/karma.conf.js --preprocessors "{'../grails-app/assets/javascripts/**/!(lib)/**/*.js': 'jshints'}"
The error:
/usr/lib/node_modules/karma/lib/config.js:145
Object.keys(preprocessors).forEach(function(pattern) {
^
TypeError: Object.keys called on non-object
at Function.keys (native)
at normalizeConfig (/usr/lib/node_modules/karma/lib/config.js:145:10)
at Object.parseConfig (/usr/lib/node_modules/karma/lib/config.js:293:10)
at Object.exports.start (/usr/lib/node_modules/karma/lib/server.js:282:20)
Why am I doing this, are there any alternatives?
The coverage and jshint preprocessors aren't compatible. I could copy the karma.conf.js but that's not a great long-term option for maintainability.
Create a karma.conf.js template.
module.exports = {
...
}
Create a wrapper for karma (let's call it 'wrapper.js'):
var karma = require('karma');
function configurator(options){
var config = getTemplate();
// based on the options object will add different preprocessors
if(options.blah){
config.preprocessors["../grails-app/assets/javascripts/**/!(lib)/**/*.js"] = 'whatever';
}
return config;
}
function getTemplate(){
return {
// start with an empty object
preprocessors: {},
// point to the template, we will enrich it
configFile : __dirname + 'path/to/your/karma.conf.js'
};
}
function startKarma(options){
var config = configurator(options);
karma.server.start(config, function(exitCode){
// exit code === 0 is OK
if (!exitCode) {
console.log('\tTests ran successfully.\n');
// rerun with a different preprocessor
startKarma({blah1: true});
} else {
// just exit with the error code
process.exit(exitCode);
}
});
}
function passedArg(string){
// look at the arguments passed in the CLI
return process.argv.indexOf(string) > -1;
}
function start(){
// start with empty options
var options = {};
if(passedArg('blah')){
options.blah = true;
}
//start karma!
startKarma(options);
}
start();
At this point you can pass the parameter from the console:
$ node wrapper.js blah
For more information about the karma API have a look at: http://karma-runner.github.io/0.8/dev/public-api.html