I use the following command when building an ionic project for desktop
ionic cordova build browser --prod
Which results in the following file being generated
build/main.js
However I would like to be able to add a version number to the generated file automatically as part of the build process. So would end up with something like
build/main.js?version=1.00
as to avoid needing to clear the browser cache after every prod build.
Is there a flag for this, or is it something I must do manually?
Any advice would be great!
EDIT:
My solution is on GitHub for anyone interested!
https://github.com/RichardM99/ionic-3-version-build-file-hook
Here's some advice - You can create a cordova hook.
Hooks are scripts that you want to be executed at different stages of the build process. In your case, you are looking at a script which renames the main.js file after the build event is finished, or in other words a 'after_build' type hook.
The script will usually be a Node.js file, although you can have other types of scripts executed as well.
One more thing. Since you want to get around cache, you wont be renaming the file itself. What you will want to do is rather replace the reference to "main.js" in you "index.html" to include a random or maybe your actual version number.
I have pointed you in a direction, but won't spoonfeed. Look up documentation on cordova hooks. They are super simple if you understand Javascript/Node
Something like this should get the job done:
var index_orig = fs.readFileSync(path-to-index.html, 'utf8');
var index_new = index_orig.replace("main.js", "main.js?version="+version_num);
fs.writeFileSync(path-to-index.html, index_new, 'utf8');
If you want the actual build number, you can read your config.xml and parse it to get it's value.
Hope it helps.
I wrote blog long time ago
In my build pipeline i have command to set version
version "$(app.versionPrefix)$(Build.BuildNumber)"
$(app.versionPrefix) - is a prefix version such as 0.1.
$(Build.BuildNumber) - is build version
Then I have environment file
export const environment = {
apiUrl: 'https://....',
production: true,
version: '0.0.57'
}
Then i have js script to update version in environment and config.xml
var replace = require('replace-in-file');
var package = require("./package.json");
var buildVersion = package.version;
const options = {
files: ['config.xml'],
from: /" version="([0-9]*.[0-9]*.[0-9]*)"/g,
to: "\" version=\""+ buildVersion + "\"",
allowEmptyPaths: false,
};
const optionsEnv = {
files: ['src/environments/environment.prod.ts'],
from: /version: '(.*)'/g,
to: "version: '"+ buildVersion + "' ",
allowEmptyPaths: false,
};
try {
let changedFiles = replace.sync(options);
if (changedFiles == 0) {
throw "Please make sure that file '" + options.files + "' has \"version: ''\"";
}
changedFiles = replace.sync(optionsEnv);
if (changedFiles == 0) {
throw "Please make sure that file '" + optionsEnv.files + "' has \"version: ''\"";
}
console.log('Build version set: "' + options.to + '"');
}
catch (error) {
console.error('Error occurred:', error);
throw error
}
NOTE: you need to install plugin replace-in-file
Then in build pipe line I am running this script
node ./replace.build.js
In your case if you need only for browser you can tune script.
Related
I have an angular project,which when uploaded to the server the css files are getting cached and the previous version files are served.So,then I started adding something like
<link src="assets/custom.css?version=1"></link>
At the end of my files,so the cache issue is fixed.
Another story in between is my site has some pages which has question mark in its url example,
www.mysite.com/home?login
I dont want google to crawl this page,so we decided to put a setting that all url's with question mark should not be crawl by google.So,those '?' mark url's are blocked.
Here because of this my css file is also getting blocked and crawl by the google since it has question mark in it.
SO,is there any other way to block css cahce with adding '?' random number to it.I am very happy to follow the suggestion.Thanks.
You can add timestamp behind file name, i.e, custom-1515043221.css.
Check this out : gulp-rev, it is a gulp plugin which adds random string behind file to stop it from caching.
You can also do this manually by writing gulp task,
gulpfile.js
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var replace = require('gulp-replace');
var rename = require("gulp-rename");
var timestamp = (new Date()).getTime();
gulp.task('default', ['add-timestamp', 'rename']);
// add timestamp behind files in index.html
gulp.task('add-timestamp', function () {
gulp.src(['index.html'])
.pipe(replace('style.min', 'style.min-' + timestamp))
.pipe(gulp.dest('build/'));
});
// append timestamp behind files in build
gulp.task('rename', function () {
gulp.src(['build/css/*.css'])
.pipe(rename(function (path) {
if (path.basename === 'style.min') {
path.basename += '-' + timestamp;
}
}))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
Then run this gulpfile using gulp command
I am very new to Node server/javacsript. So I am sorry if this might be stupid
question/topic.
I intended to create a very simple solution to open JSON file, load to list, and save it back to my local disk (running node.js server).
Could you please help me out, what I am doing wrong? I am running app in browser using react.
index.js containing
var fs = require('fs');
var fileName = './test.json';
var file = require('./test.json');
alert(file.name + " " + file.age);
file.name = "Peter";
alert(file.name + " " + file.age);
fs.writeFile('./test.json', JSON.stringify(file), function (err) {
if (err) return alert(err);
console.log(JSON.stringify(file));
alert('writing to ' + fileName);
});
Before I was not even able to open JSON file. I needed to include this property into the webpack config file.
node: {
fs: 'empty'
}
Now I am able to open JSON file, change it virtually, but unable to save it.
In chrome developer tools, it prints "fs.writeFile is not a function" into console.
Thank you very much.
When you included the property in your webpack config
node: {
fs: 'empty'
}
You told webpack that the module fs should just be an empty object. You can confirm this by simply putting a console.log(fs) in your file to see it is indeed empty.
Beyond that, fs is not going to work in your browser. fs expects the node.js runtime (which includes non-JavaScript things in order to make it work), not your browser's runtime.
If you want a user to save a file, you'll have to use a browser based saving solution. You won't be able to just arbitrarily write files like that outside of something like your browser's local storage.
I am using meteor to create simple blog system. For sitemaps files I'm using this package.
I added some initialize data in server startup function (create some post) and used below code (server/sitemaps.js) in server to create sitemaps for each category (e.g. sitemap1.xml for first category and etc):
function sitemapOutput(categoryName){
var out = [], posts = Posts.find({ category: categoryName }).fetch();
_.each(posts, function(post) {
out.push({
page: post.url(),
lastmod: post.insertDate,
changefreq: 'weekly'
});
});
return out;
}
Categories.find().forEach(function(Category, index) {
sitemaps.add('/sitemap' + (index+1) +'.xml',
function(){ return sitemapOutput(Category.name); });
});
And I have startup like this: (server/startup.js)
Meteor.startup(function () {
// some post and category created here
});
But sitemaps didn't exist until server restart (my robots.txt files also empty) but when server restarted sitemaps and robots.txt content created for me.
I think posts inserted after sitemaps.js but what's the problem guys and how to fix that?
New try:
I try new solution like below but this code also didn't work. (I want to create seperate sitemap file for each 10000 category to prevent big sitemap and google sitemap error):
for (var i=0;i<=Math.round(Categories.find().count()/10000);i++) {
sitemaps.add('/sitemap' + i +'.xml', function(){
var out = [];
Categories.find({}, {sort: {insertDate: 1} ,limit: 10000, skip: i * 10000}).forEach(function(Category) {
out.push({
page: "/category/" + Category.title + "/" + Category._id,
lastmod: Category.insertDate,
changefreq: 'weekly'
});
});
return out;
});
}
robots.txt show sitemap files correctly but all sitemap is empty like this:
<urlset> </urlset>
When does sitemaps.add() run? I think it does on server restart but New try was disappointed me and I think my guess is incorrect and If sitemaps.add() was run why it's empty.
Your problem seems to be the folder structure. You said you have /server/sitemaps.js and /server/startup.js and you wish that sitemaps would run after your startup, but the thing is Meteor will run those files alphabetically, so sitemap comes before startup. If you place your startup.js inside a lib folder, such as /server/lib/startup.js, you'll get the desired results, because Meteor will run lib folder before others.
It's normal behavior, the code at Meteor.startup will run just once at app start. If you're looking to re run this function you either need to use meteor method to call the function from the client or you can you use something like cron job to run repeat jobs here is a great package https://atmospherejs.com/percolate/synced-cron
I use wkhtmltopdf to create pdf(s) from html(s)
I have next function :
private void CreateTempPdf(string htmlPath, string pdfPathTemp)
{
var processorInfo = new System.Diagnostics.ProcessStartInfo
{
Arguments =
"--margin-top 27 \"" + htmlPath + "\" \"" + pdfPathTemp +
"\" ",
FileName = PublisherConfigurationManager.Pdf2HtmlConverter,
UseShellExecute = true
};
using (var proc = new System.Diagnostics.Process())
{
proc.StartInfo = processorInfo;
proc.Start();
proc.WaitForExit();
}
}
in which i pass paths of html file and destination file.
I want to add some js script to run, before pdf will be generated.
I add my code : --run-script <js> into Arguments after pdfPathTemp but script isn't applied to pdf. I also add it before --margin but this case also doesn't help me.
How correctly add scripts into wkhtmltopdf process?
I would simply add the script directly into the HTML page. In this case I would load the HTML from the path into a string, inject the script, then write a tempfile for the process duration.
As for why --run-script does not work, I have no idea. Have you tried it directly in the command line with a very simple script and HTML to see if a minimal example works for you?
If that is not an option, you might have to play around with different files for differnt js arguments, if you require such things.
I am currently building a project with node.js in Windows. I am using a batch file to assemble resources and build jade templates via the command line. With Jade, I am using the switch -o to defines a JS object that fills localized content in the template
For awhile, everything worked nicely. However, changes to my JSON lookup have resulted in an error:
"The input line is too long"
Researching the error, I found that windows shell has a limit on how long your lines can be. Unfortunately, I need the whole lookup object for my project. However, I started wondering if jade can accept a path to my lookup file instead of a string with the contents of the file. Currently, I'm building the contents into a variable and calling jade with that ala:
SetLocal EnableDelayedExpansion
set content=
for /F "delims=" %%i in (%sourcedir%\assets\english.json) do set content=!content! %%i
::use the json file as a key for assembling the jade templates
call jade %sourcedir% --out %destdir% -o"%content%"
EndLocal
If I could use a path to the lookup file, it would be much easier. However, I am usure how to do that (if it's even possible). and Jade's documentation is a bit lacking.
So, in short, is it possible for Jade to accept a filepath to a JS object rather than a string containing the object? Is there a better way to contruct the jade call that wont push it past the limit?
Write a node.js script that will read your "assets" and will call a jade. Something like:
var fs = require('fs'),
_ = require('underscore'),
async = require('async');
var sourceDir = 'path to the directory with your jade templates',
destinationDir = 'path to the directory where you want the result html files to be contained in';
async.waterfall([
async.parallel.bind(null, {
serializedData: fs.readFile.bind(null, 'assets/english.json'),
files: fs.readDir.bind(null, sourceDir),
}),
function (result, callback) {
var data = JSON.parse(result.serializedData),
files = result.files;
async.parallel(_.map(files, function (file) {
return async.waterfall.bind(null, [
fs.readFile.bind(null, sourceDir + file),
function (jadeSource, callback) {
process.nextTick(callback.bind(null, jade.compile(jadeSource)(data)));
},
fs.writeFile.bind(null, destinationDir + file)
]);
}), callback);
}
], function (err) {
if (err) {
console.log("An error occured: " + err);
} else {
console.log("Done!");
}
});
Then in your batch file call this script directly, instead of enumerating the directory and calling the jade manually.
It will not only solve your problem, but also work much faster because:
I/O operations are done in parallel;
Node.js is only started once during the build process, as opposed to starting it for every single file as you do now.