I'm developing my first node webkit app. I'm confused about packing the files. Is the end product a single file that can be executed ?
The end result will not be a single executable, you must also include some DLLs in your zip-file.
These line in github made me more confused.
How is the packaging done ?
Do I need to include the webkit files also in the package or just the files I have created ?
I packaged my node-webkit app successfully for various platforms by using the below gulp script. Below is the script which is self explanatory.
Reference : https://github.com/nwjs/nwbuilder/blob/master/example/Gulpfile.js
var NwBuilder = require('nw-builder');
var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('nw', function () {
var nw = new NwBuilder({
version: '0.12.3',
files: '../nodepoc/**',
platforms: ['osx64','win32','win64']
});
// Log stuff you want
nw.on('log', function (msg) {
gutil.log('nw-builder', msg);
});
// Build returns a promise, return it so the task isn't called in parallel
return nw.build().catch(function (err) {
gutil.log('nw-builder', err);
});
});
gulp.task('default', ['nw']);
Save the file as gulpFile.js. In terminal , simply run gulp command in the same location as that of the gulpFile.js and it will download the necessary node-webkit distributions for the platforms and build the package for you.
Related
I'm using Visual Studio 2015 and I have gulpfile that I run with the gulp task manager.
The file is getting bigger and bigger. Is there some way that I can split the tasks into more than one file. If there is then I would really appreciate a very small example of how I can do this.
Yes, as the gulp documentation explains: https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-across-multiple-files.md
This is depreciated and will not be supported in gulp 4.0.
gulpfile.js
var requireDir = require('require-dir');
var tasks = requireDir('./tasks');
Or with gulp-require-tasks
gulpfile.js
// Require the module.
var gulpRequireTasks = require('gulp-require-tasks');
// Call it when neccesary.
gulpRequireTasks({
path: __dirname + '/tasks' // This is default
});
tasks/one.js
module.exports = {
dep: ['clean:styles'],
fn: function (gulp, callback) {
return gulp.src('...')
.pipe(plugin())
.dest('...');
}
};
I'm using the del package in my gulpfile as part of a clean task.
Below are the the versions of things I'm using
Visual Studio 2015 Community
Node.js v2.11.3
gulp v3.9.0
del v2.0.2
This is an extract from my gulp file:
var gulp = require('gulp');
var del = require('del');
var config = require('./gulp.config')();
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('images', ['clean-images'], function () {
log('Copying and compressing the images');
return gulp
.src(config.images)
.pipe($.imagemin({optimizationLevel: 4}))
.pipe(gulp.dest(config.build + 'images'));
});
gulp.task('clean-images', function (done) {
clean(config.build + 'images/**/*.*', done);
});
function clean(path, done) {
log('Cleaning: ' + $.util.colors.blue(path));
del(path, done);
}
When I run the task images from the command prompt using gulp images the clean-images task executes but never finishes. It errors with the lines:
[16:10:45] Using gulpfile ~\Documents\Visual Studio 2015\Projects\**\Gulpfile.js
[16:10:46] Starting 'clean-images'...
[16:10:46] Cleaning: build/images/**/*.*
Process terminated with code 0.
As a result the rest of the images task doesn't execute.
The images task runs fine when I remove the clean-images dependency.
Don't suppose anyone has seen this issue before, and knows how to correct it?
Thanks
I think you've encountered the same error as this user : the del module doesn't use callbacks anymore, but promises. done is never called, so the clean and images task run concurrently, which causes an error.
You could just return from the clean method :
gulp.task('clean-images', function () {
return clean(config.build + 'images/**/*.*');
});
function clean(path) {
log('Cleaning: ' + $.util.colors.blue(path));
return del(path);
}
I'm running gulp 3.9.0 and calling some gulp commands from Visual Studio 2013. The flow is such that whenever I build in VS, gulp should clean my temporary and output files, then after a successful build, compile my javascript assets into one file.
The problem is that, I've noticed that after running "gulp build", sometimes my assets are not generated at all. This even happens on the command line. After running "gulp clean" (which removes the output), I have to run "gulp build" twice just to see the output materialize. It's as if gulp is failing silently. Not sure if this is an issue with Node running on Windows or if I have misconfigured something.
Note that VS is responsible for compiling all TypeScript files into a single .js in the \output folder.
Apologies in advanced if there is a better way to do what I'm trying to do. Still a gulp/node newbie.
VS Pre-Build:
gulp clean
VS Post-Build:
gulp build
gulpfile.js:
var gulp = require('gulp');
var del = require('del');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var templateCache = require('gulp-angular-templatecache');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
gulp.task("cleanOutdatedLibraries", function(){
del("./Libs/*");
del(['./myapp.js', './myapp.min.js', './myapp.css'])
});
gulp.task("cleanTemporaryFiles", function(){
del("./output/*");
});
/** Run gulp clean on prebuild */
gulp.task('clean', ["cleanOutdatedLibraries", "cleanTemporaryFiles"])
gulp.task('copyNewestLibraries', function(){
var bowerFiles = ['angular/angular.min.js',
'angular/angular.js',
'angular/angular.min.js.map',
'angular-ui-router/release/angular-ui-router.min.js',
'angular-local-storage/dist/angular-local-storage.min.js',
'jquery/dist/jquery.min.js',
'jquery/dist/jquery.min.map',
'lodash/lodash.min.js',
'angular-resource/angular-resource.min.js',
'angular-resource/angular-resource.min.js.map',
'momentjs/min/moment.min.js',
'angular-loading-bar/src/loading-bar.js',
'ngDialog/js/ngDialog.min.js'];
gulp.src(bowerFiles, {cwd: "./bower_components/"})
.pipe(gulp.dest('./Libs'));
});
gulp.task('copyThirdPartyLibraries', function(){
var thirdPartyFiles = ['jquery-ui.min.js',
'angular-sanitize.min.js'];
gulp.src(thirdPartyFiles, {cwd: "./_thirdparty/"})
.pipe(gulp.dest('./Libs'));
});
/** Merge all Angular JS HTML templates into a cache */
gulp.task('mergeHtmlTemplatesIntoAngularCache', function(){
gulp.src('app/**/*.html')
.pipe(templateCache("templates.js", {
module: "myapp"
}))
.pipe(gulp.dest('./output/'));
});
gulp.task('produceMinfiedApp', function(){
gulp.src(['app/**/*.js', 'output/typescripts.js'])
.pipe(concat('bundle.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('./output/'));
gulp.src(['output/bundle.min.js', 'output/templates.js'])
.pipe(concat('myapp.min.js'))
.pipe(gulp.dest('./'));
});
gulp.task('produceApp', function(){
gulp.src(['app/**/*.js', 'output/typescripts.js'])
.pipe(concat('bundle.js'))
.pipe(ngAnnotate())
.pipe(gulp.dest('./output/'));
gulp.src(['output/bundle.js', 'output/templates.js'])
.pipe(concat('myapp.js'))
.pipe(gulp.dest('./'));
});
gulp.task('mergeStyles', function(){
gulp.src(['Styles/**/*.css'])
.pipe(concat('styles.css'))
.pipe(gulp.dest("./output/"));
gulp.src(['app/**/*.css'])
.pipe(concat('app.css'))
.pipe(gulp.dest("./output/"));
gulp.src(['output/styles.css', 'output/app.css'])
.pipe(concatCss("./myapp.css"))
.pipe(minifyCss({compatibility: 'ie10'}))
.pipe(gulp.dest('./'));
});
/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries",
"copyThirdPartyLibraries",
"mergeHtmlTemplatesIntoAngularCache",
"produceMinfiedApp",
"produceApp",
"mergeStyles"]);
/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries",
"copyThirdPartyLibraries",
"mergeHtmlTemplatesIntoAngularCache",
"produceMinfiedApp",
"produceApp",
"mergeStyles"]);
These tasks (copyNewestLibraries, produceApp, etc.) run asynchronously, in no particular order. E.g. produceApp may finish before copyNewestLibraries, which is probably not what you want.
See How to run Gulp tasks sequentially one after the other for more info.
Need help.
I use gulp-conect and it livereload method. But if I build a few template in time, get a lot of page refresh. Is any solution, I want to build few templates with single page refresh?
So, I reproduce the problem you have and came accross this working solution.
First, lets check gulp plugins you need:
gulp-jade
gulp-livereload
optional: gulp-load-plugins
In case you need some of them go to:
http://gulpjs.com/plugins/
Search for them and install them.
Strategy: I created a gulp task called live that will check your *.jade files, and as you are working on a certain file & saving it, gulp will compile it into html and refresh the browser.
In order to accomplish that, we define a function called compileAndRefresh that will take the file returned by the watcher. It will compile that file into html and the refesh the browser (test with livereload plugin for chrome).
Notes:
I always use gulp-load-plugin to load plugins, so thats whay I use plugins.jad and plugins.livereload.
This will only compile files that are saved and while you have the task live exucting on the command line. Will not compile other files that are not in use. In order to accomplish that, you need to define a task that compiles all files, not only the ones that have been changed.
Assume .jade files in /jade and html output to /html
So, here is the gulpfile.js:
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();
gulp.task('webserver', function() {
gulp.src('./html')
.pipe(plugins.webserver({
livereload: true
}));
gulp.watch('./jade/*.jade', function(event) {
compileAndRefresh(event.path);
});
});
function compileAndRefresh(file) {
gulp.src(file)
.pipe(plugins.jade({
}))
.pipe(gulp.dest('./html'))
}
Post edit notes:
Removed liveReload call from compileAndRefresh (webserver will do that).
Use gulp-server plugin insted of gulp-connect, as they suggest on their repository: "New plugin based on connect 3 using the gulp.src() API. Written in plain javascript. https://github.com/schickling/gulp-webserver"
Something you can do is to watch only files that changes, and then apply a function only to those files that have been changed, something like this:
gulp.task('live', function() {
gulp.watch('templates/folder', function(event) {
refresh_templates(event.path);
});
});
function refresh_templates(file) {
return
gulp.src(file)
.pipe(plugins.embedlr())
.pipe(plugins.livereload());
}
PS: this is not a working example, and I dont know if you are using embedlr, but the point, is that you can watch, and use a callback to call another function with the files that are changing, and the manipulate only those files. Also, I supposed that your goal is to refresh the templates for your browser, but you manipulate as you like, save them on dest or do whatever you want.
Key point here is to show how to manipulate file that changes: callback of watch + custom function.
var jadeTask = function(path) {
path = path || loc.jade + '/*.jade';
if (/source/.test(path)) {
path = loc.jade + '/**/*.jade';
}
return gulp.src(path)
.pipe(changed(loc.markup, {extension: '.html'}))
.pipe(jade({
locals : json_array,
pretty : true
}))
.pipe(gulp.dest(loc.markup))
.pipe(connect.reload());
}
First install required plugins
gulp
express
gulp-jade
connect-livereload
tiny-lr
connect
then write the code
var gulp = require('gulp');
var express = require('express');
var path = require('path');
var connect = require("connect");
var jade = require('gulp-jade');
var app = express();
gulp.task('express', function() {
app.use(require('connect-livereload')({port: 8002}));
app.use(express.static(path.join(__dirname, '/dist')));
app.listen(8000);
});
var tinylr;
gulp.task('livereload', function() {
tinylr = require('tiny-lr')();
tinylr.listen(8002);
});
function notifyLiveReload(event) {
var fileName = require('path').relative(__dirname, event.path);
tinylr.changed({
body: {
files: [fileName]
}
});
}
gulp.task('jade', function(){
gulp.src('src/*.jade')
.pipe(jade())
.pipe(gulp.dest('dist'))
});
gulp.task('watch', function() {
gulp.watch('dist/*.html', notifyLiveReload);
gulp.watch('src/*.jade', ['jade']);
});
gulp.task('default', ['livereload', 'express', 'watch', 'jade'], function() {
});
find the example here at GitHub
I'm having trouble getting this to work and even finding solutions through google on how to make it work.
Going to Bowers site shows they have a programatic API that looks like I should be able to run it in node, of course I can however it's not obeying my .bowerrc file and installing them into my dev folder created by yeoman.
Does this have something to do with the way yeoman works? Are the files and directories not quite available yet until after it's logged done()?
Here is my index.js
'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var chalk = require('chalk');
var bower = require('bower');
var FoprojectGenerator = yeoman.generators.Base.extend({
sayHello: function(){
console.log(this.yeoman);
},
scaffoldFolders: function(){
this.mkdir("working");
this.mkdir("working/assets");
this.mkdir("working/assets/sass");
this.mkdir("working/assets/coffee");
this.mkdir('dev');
},
copyMainFiles: function(){
this.copy("_index.html", "working/index.html");
this.copy("_gruntfile.js", "Gruntfile.js");
this.copy("_package.json", "package.json");
this.copy("_bower.json", "bower.json");
this.copy("_.bowerrc", ".bowerrc");
this.copy("assets/sass/_site.sass", "working/assets/sass/site.sass");
this.copy("assets/sass/_mixins.sass", "working/assets/sass/_mixins.sass");
this.copy("assets/sass/_normalize.sass", "working/assets/sass/_normalize.sass");
this.copy("assets/coffee/_scripts.coffee", "working/assets/coffee/scripts.coffee");
},
installDependencies: function(){
var done = this.async();
console.log("\nInstalling Node Dependencies\n");
this.npmInstall("", function(){
console.log("\nInstalling Bower Packages\n");
bower.commands
.install()
.on('end', function(){
done();
});
});
}
});
module.exports = FoprojectGenerator;
Like I said it runs great, but it installs it next to the bower.json as apposed to in the dev folder like I've defined in the .bowerrc file like so
{
"directory": "dev/bower_components"
}
When I run bower install after yeoman is done it installs the bower_components folder in the dev folder like it should.
Any guidance would be greatly appreciated!
Maybe the Yeoman generator you use could force you to install deps on a certian specific path.
Open Terminal and go to the root directory of your app.
type ls -la.
if you see .yo-rc.json, type cat .yo-rc.json.
Does it show any particular config for the path like below?
{
"generator-backbone-laser": {
"appPath": "app"
}
}
if so, delete .yo-rc.json.
a creator of Yoeman's generator sometimes set app path on that file.