Assemble: How can I generate pages from json/yaml? - javascript

Is there a way to generate pages from json/yaml if you provide a layout? I thought this was possible, but can't find in docs.
This is currently being tracked here in GitHub: http://webb.li/QjTX

Since the options.pages feature has been implemented, you can add pages like this:
options: {
pages: {
"about": {
"data": {
"title": "About"
},
"content": "Content for {{title}}"
},
...
}
}
We aren't supporting automatic loading of a json/yml file, but you can do this inside your Gruntfile and add the object to options.pages that way...
module.exports = function(grunt) {
grunt.initConfig({
// package.json
pkg: grunt.file.readJSON('package.json'),
assemble: {
options: {
flatten: true,
layoutdir: 'src/layouts',
assets: 'dest/assets'
},
blog: {
options: {
engine: 'handlebars',
layout: 'post.hbs',
site: {
title: 'This is my Blog'
},
pages: grunt.file.readJSON('pages.json')
},
files: { 'dest/': ['src/index.hbs'] }
}
}
});
// Load npm plugins to provide necessary tasks.
grunt.loadNpmTasks('assemble');
// Default task.
grunt.registerTask('default', ['assemble']);
};
This example uses the post.hbs file as the layout for any pages defined in the pages.json file. It will also build a page for the index.hbs specified in the files src array. Right now, the files dest/src is required so Assemble knows where to write the files, but I think we'll add that to the options, or the page object so it can be run without the files object.

Related

Aurelia bundler does not delete references to old versioned bundles

I am switching my SPA web app from Durandal to Aurelia and am now taking a look at the bundling process.
I use gulp to bundle the app and I followed the instructions on this Aurelia documentation page and other resources on the web. It works but there are some unclear things to me.
This is my gulpfile.js
var gulp = require('gulp'),
bundler = require('aurelia-bundler'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
del = require('del');
var config = {
force: true,
baseURL: '.', // baseURL of the application
configPath: './config.js', // config.js file. Must be within `baseURL`
bundles: {
"Scripts/build/app-build": { // bundle name/path. Must be within `baseURL`. Final path is: `baseURL/dist/app-build.js`.
includes: [
'[Scripts/app/**/*.js]',
'Scripts/app/**/*.html!text',
'Content/*.css!text'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
},
"Scripts/build/vendor-build": {
includes: [
'jspm_packages/npm/babel-runtime#5.8.38/helpers/class-call-check.js',
'jspm_packages/npm/babel-runtime#5.8.38/helpers/create-class.js',
'jspm_packages/npm/babel-runtime#5.8.38/core-js/object/define-property.js',
'jspm_packages/npm/core-js#1.2.7/library/fn/object/define-property.js',
'jspm_packages/npm/babel-runtime#5.8.38/core-js/object/define-properties.js',
'jspm_packages/npm/core-js#1.2.7/library/fn/object/define-properties.js',
'npm:aurelia-framework#1.0.7',
'npm:aurelia-loader-default#1.0.0',
'npm:aurelia-logging-console#1.0.0',
'npm:aurelia-templating-binding#1.0.0',
'npm:aurelia-templating-resources#1.1.1',
'npm:aurelia-templating-router#1.0.0',
'npm:aurelia-knockout#1.0.2',
'npm:aurelia-history-browser#1.0.0',
'npm:aurelia-bootstrapper#1.0.0',
'npm:aurelia-fetch-client#1.0.1',
'npm:aurelia-router#1.0.6',
'npm:aurelia-animator-css#1.0.1',
'npm:babel-core#5.8.38',
'npm:babel-runtime#5.8.38',
'npm:core-js#1.2.7',
'github:systemjs/plugin-text#0.0.9'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
}
}
};
gulp.task('build', ['minify'], function () {
return bundler.bundle(config);
});
And this is config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"es7.decorators",
"es7.classProperties",
"runtime"
],
"compact": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
},
map: //some mappings
}
If I run the gulp task to bundle, it works, and I can load my app using the bundled files, but there are some things I don't understand:
After the bundled files are created, the config.js file is updated within the "bundles:" property with the files which have been created for the bundle, and a random versioning number (since I had set 'rev: true' in the options)
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
]
]
When I run the task again, maybe after some changes, the new bundled file has been added to the config.js file like that:
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
],
"Scripts/build/vendor-build-t67uj8e5f4.js": [
//list of files
]
]
but as you can see, the old one is still there. How do I tell him to "clear" the bundles property when I create a new bundle?

Using Grunt Serve to show website on localhost?

I've built Gruntfiles in the past, but mostly to compile Less and Jade, so this steps a bit out of my comfort zone and I'm struggling to figure out what to do.
I'd like to use the Gruntfile to:
Compile Jade to html
Compile Less to css
Build and show website at localhost:9000
Refresh localhost:9000 upon save of file (this uses grunt watch I'm assuming?)
Basically, I'd like to keep it light and easy, so that once I learn I can use it to teach others that I know. :)
Here's what my Gruntfile looks like so far. I have grunt-serve in there, but nothing loads to the page when I run it, so I'm really confused. Thanks for the help!
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "assets/views",
src: "**/*.jade",
dest: "public",
expand: true,
ext: ".html"
} ]
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
'public/css/main.css': 'assets/less/main.less',
}
}
},
watch: {
styles: {
files: [
'less/main.less',
],
tasks: ['less'],
options: {
nospawn: true
}
}
},
serve: {
options: {
port: 9000
}
}
});
grunt.registerTask('default', ['jade','less']);
grunt.loadNpmTasks('grunt-serve');
};
I think your build task is running jade and less, but not serve. Instead of
grunt.registerTask('default', ['jade','less']);
try
grunt.registerTask('default', ['jade','less','serve']);

pass middleman variable to grunt file

My middleman template has an 'id' variable that I put my html emails job name into.
I know if I change my middleman erb file from index.html.erb to newName.html.erb it will output that as the final files name.
My problem is that most of my grunt tasks require the file name I want them to run on (I've tried using *.html, but it only works for some tasks) and short of editing that in the grunt file prior to starting grunt up they won't execute if I change the erb file name.
Is there a way to pass grunt that 'id' variable to name the file middleman is outputting and also plug that variable into the various tasks so they too accept that as what the filename?
Here is my grunt config:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Build html
middleman: {
options: {
useBundle: true
},
server: {},
build: {
options: {
command: "build"
}
}
},
// Format html file
prettify: {
options: {
// Task-specific options go here.
},
one: {
src: 'build/index.html',
dest: '_output/index.html'
}
},
// Run the text converter
execute: {
simple_target_with_args: {
options: {
// execute node with additional arguments
args: ['_output/index.html']
},
src: ['node_modules/node-text-converter/converter.js']
}
},
'special-html': {
compile: {
files: {
'_output/index.html': '_output/index.html',
}
}
},
'phantomjs_screenshot': {
main: {
options: {
delay: 1000
},
files: [{
expand: true,
cwd: '_output',
src: ['**/*.html'],
dest: '_output/screenshots/',
ext: '.jpg'
}]
}
}
});
You should store your variable in a JSON file and import it both into Middleman and Grunt.

How to load versioned resources in a karma unit test

Please, find below my karma.conf.js:
module.exports = function (config) {
var path = require("path"),
basePath = "../../../../../..",
version = require(path.join(__dirname, basePath, "ThirdPartyJsLibRootMap.json"));
config.set({
basePath: basePath,
frameworks: ['intern'],
files: [
'Tools/Karma/dojo-config.js',
'http://devstatic/libraries/dojo-debug/' + version['dojo-debug'] + '/dojo/dojo.js',
...
],
reporters: ['progress', 'html'],
htmlReporter: {
outputFile: 'Tools/Karma/HRunitTestReport.html'
},
port: 9876,
colors: false,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
captureTimeout: 60000,
browserNoActivityTimeout: 60000,
singleRun: true
});
};
The files section specifies a few files, but the most important ones are:
Tools/Karma/dojo-config.js
http://devstatic/libraries/dojo-debug/' + version['dojo-debug'] + '/dojo/dojo.js
Notice, that all the 3rd party dependencies are served from a dedicated server - devstatic. It is sort of an internal CDN. The 3rd party content is also versioned and the versions used by the current revision of our application are stored in a dedicated json file - ThirdPartyJsLibRootMap.json, which is part of the application.
The aforementioned karma.conf.js works, but I am not sure if I am doing it correctly. I have a feeling that the files section is not intended to hold http urls. And I am pretty sure it will not work with expressions like **.
But there is more. Tools/Karma/dojo-config.js is responsible for common configuration and it looks like this:
window.__karma__.loaded = function () { };
setImmediate = function (fn) { fn(); };
dojoConfig = {
baseUrl: "http://devstatic/libraries/dojo-debug/1.10.4",
async: true,
useDeferredInstrumentation: true,
has: {
'host-karma': true
},
paths: {
'Globalization': 'http://devstatic/libraries/globalization-debug/0.1.1',
'put-selector': 'http://devstatic/libraries/put-selector/0.3.5',
'dgrid': 'http://devstatic/libraries/dgrid/0.3.16',
'xstyle': 'http://devstatic/libraries/xstyle/0.1.3',
'toastr': 'http://devstatic/libraries/toastr/1.2.2-514cc12',
...
},
packages:
[
{
name: "jquery",
location: "http://devstatic/libraries/jquery/1.8.3",
main: "jquery"
},
{
name: "jquerybase64",
location: "http://devstatic/libraries/jquery/1.8.3",
main: "jquery.base64"
},
{
name: "dojo",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dojo"
},
{
name: "dijit",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dijit"
},
{
name: "dojox",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dojox"
},
{
name: "intern",
location: "/base/Tools/Intern/node_modules/intern"
},
{
name: "karma",
location: "/base/Tools/Karma"
}
],
deps: null,
callback: null
};
And here I am in a major problem. How do I communicate the 3rd party versions loaded from ThirdPartyJsLibRootMap.json over to Tools/Karma/dojo-config.js?
I mean, those versions are known at the time karma.conf.js is processed and if I could inject them into the html page generated by karma then I could reference them from Tools/Karma/dojo-config.js and compose the right third party URLs. Alas, so far found no way to do it.
So, basically I have the following questions:
What is the right way to refer to http URLs in karma.conf.js? The answer could be - don't, but then how do I make it loaded by the generated html page?
If loading http URLs the way I do it in karma.conf.js is fine, then how to specify expressions like **?
How to make the information computed in karma.conf.js available to the javascript loaded in the browser? This information is known at the "node time" (when karma.conf.js is run), but I am puzzled as to how to make it available at the "browser time".

Grunt - output 2 versions of web app

I'm learning Grunt and trying to sort out how I can create 2 versions of the same application. The difference between the two are configuration settings.
Ideally, I would like the process to output 2 versions. One with a boolean in one of the .js files set to false, the other left to true. I would also need to concat and minify then file.
Is there a recommended way to do this? Thanks in advance
You can specify 2 configurations in your grunt.initConfig
grunt.initConfig({
myTask: {
version1: { ... }
version2: { ... }
}
})
And then register your default task to run each of these versions
grunt.task.registerTask("default", ["myTask:version1", "myTask:version2"])
Or just some other task name, myTaskAllVersions instead of default
You could use this versioning to flip your .js boolean, per version 1 or 2.
A similar approach could be taken to minifying and concatting the files afterwards, i.e.
grunt.initConfig({
minify: {
version1: { ... }
version2: { ... }
}
})
and
grunt.task.registerTask("default", ["myTask:version1", "minify:version1"])
You could do all of this with the uglifyjs grunt task.
Here's an example of the config for your Gruntfile:
grunt.initConfig({
uglify: {
app1: {
files: {
'dist/app1.min.js': [
'src/app1.js',
'src/common.js'
]
}
},
app2: {
files: {
'dist/app2.min.js': [
'src/app2.js',
'src/common.js'
]
}
}
}
});

Categories

Resources