I just started integrating Polymer into my Jekyll environment.
Essentially, I created a bower.json file in my Jekyll root that calls for followingdepencendies:
...
],
"dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.1",
"polymer": "Polymer/polymer#^1.2.0"
}
}
After running bower install in my Jekyll root, I ge the bower_components folder with all Polymer packages I requested. In my Jekyll template's head.html, I include
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-item/paper-item.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/iron-flex-layout/iron-flex-layout.html">
...
in order to integrate the desired Polymer packages. I run jekyll serve to create and see the page. So far so good.
However, I feel this may produce a long loading time for my page, not?
I'm, almost sure Google's own website speed test would ask me to reduce the number of http calls. As I discovered, Polymer provides a package named vulcanize to combine the http requests into one: https://github.com/polymer/vulcanize
Honestly, I have no clear idea how to integrate this into my process. I've seen some docs that talk about grunt but honestly I have no idea about that.
Can anyone provide a small input on how to compress my Polymer featured Jekyll page (html, html calls, css...) ? Thanks!
I had this same issue and finally got around to a solution, in case you're still working on this. (Originally posted here)
I used Gulp, copying the Polymer Starter Kit (1.2.3). I used the package.json, tasks/ directory, and modified gulpfile.js. I changed the behavior of the default and serve tasks to run Jekyll serve and build in the shell. I also changed directory references in the gulpfile to vulcanize the files in app/_site/ instead of app/.
var spawn = require('child_process').spawn;
var argv = require('yargs').argv;
gulp.task('jekyllbuild', function(done) {
return spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' })
.on('close', done);
});
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
'jekyllbuild',
['ensureFiles', 'copy', 'styles'],
'elements',
['images', 'fonts', 'html'],
'vulcanize', // 'cache-config',
cb);
});
gulp.task('serve', function(done) {
if (argv.port) {
return spawn('bundle', ['exec', 'jekyll', 'serve', '--port=' + argv.port], { stdio: 'inherit' })
.on('close', done);
} else {
return spawn('bundle', ['exec', 'jekyll', 'serve'], { stdio: 'inherit' })
.on('close', done);
}
});
Using BrowserSync would have a much cleaner effect, but this is a simple way to get Jekyll functionality and the benefit of vulcanization for production. (Note that you also have to install the yargs package to handle port specification.) My whole gulpfile is here.
Related
I've got gulp running compiling and minifying my scss and js files correctly, but for the life of my I can't seem to correctly compile haml files with the gulp-haml module.
The respective code in my gulpfile.js looks like this:
gulp.task('haml', function() {
gulp.src('.app/**/*.haml')
.pipe(plumber())
.pipe(haml())
.pipe(gulp.dest('./hamltest'));
});
gulp.task('scripts', [
'styles',
'app',
'haml'
]);
gulp.task('watch', function() {
gulp.watch([
'./styles/',
'.app/**/*.js',
'.app/**/*.haml'
],
[
'styles',
'app',
'haml'
]);
});
gulp.task('default', [
'styles',
'scripts',
'haml',
'watch'
]);
I've set up all my gulp variables and I'm running:
gulp-haml -v 0.1.6
haml -v 0.4.3
gulp CLI -v 1.2.2
Local -v 3.9.1
using the command: $ gulp in terminal to run everything
At this point I'm wondering if it's even possible to compile multiple haml files into one html or compile multiple haml files into a main haml file to then render into html.
Is using haml partials a better method to do this? Is this whole thing even possible with Gulp? Any insight would be much appreciated.
Additional Info: I've also tried using the pipe order() and pipe concat() functions
With gulp-haml Impossible to compile Ruby code like:
= Haml::Engine.new(File.read('./includes/menu-main.haml')).render
because gulp-haml has no full Ruby engine functionality. If you want to use Ruby, download it and install, then install haml for it (but Ruby requests are very slow ~1-3s). Or, use some other templater, like gulp-file-include, so you can compile then include your compiled .HTML files (im using gulp-jhaml, it has same features with gulp-haml):
var haml = require('gulp-jhaml'),
gih = require('gulp-include-html'),
browserSync = require('browser-sync');
gulp.task('haml', function() {
return gulp.src(['source-folder/*.haml'])
.pipe(haml({}, {eval: false}))
.on('error', function(err) {
console.error(err.stack)
})
.pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {
gulp.src(['source-folder/html/*.html'])
.pipe(gih({
prefix: '##'
}))
.pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
gulp.watch('source-folder/*.haml', ['html-include']);
gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);
You can also try gulp-pug with a native function include. Pug - was called 'Jade' before.
How to shorten class names in html and in css files
I have this class name
.profile-author-name-upper
And want to change this like this
.p-a-n-u
or
.panu
I'm usinig js task runner GruntJS
So what you need is uglification
This is just part from tutorial I copied online from grunt-contrib-uglify grunt plugin
Simple Configuration
npm install grunt grunt-contrib-uglify --save-dev
This will install grunt as well uglifyjs in your node_modules devDependencies as well as update package.json
Inside your Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/minified.js': ['src/jquery.js', 'src/angular.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // load the given tasks
grunt.registerTask('default', ['uglify']); // Default grunt tasks maps to grunt
};
From the command line:
*$ grunt
Running "uglify:my_target" (uglify) task
1 file created.
Done, without errors*
I am using Gulp with Browserify, and Babelify for ES6 and JSX-React transpiling. Despite numerous examples online, I can't figure out how to generate source-maps that point to the original pre-transpiled ES6/JSX files.
Here is my current gulp browserify task, which is based on this example:
gulp.task('browserify', function() {
browserify({ entries: './src/js/main.jsx', extensions: ['.jsx'], debug: true })
.transform(babelify, {presets: ["es2015", "react"]})
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/js'));
});
All this does is create a main.js.map file that seems to have the exact same content as the bundled main.js file. In Chrome it looks like this:
But I want to debug the original source .jsx and .js (with ES6 syntax) files. They look like this in my IDE:
How can I do this?
Add sourcemaps:true to babelify options
{presets: ["es2015", "react"],sourcemaps:true}
I simply had to change the settings in webpack.config.js
{
devtool: 'source-map', // Or some other option that generates the original source as seen from https://webpack.github.io/docs/configuration.html#devtool
...
}
You don't have to modify the sourceMap query param in Babel Loader because it is inferred from the devtool option of the Webpack config.
I use gulp-usref, gulp-if, gulp-uglify, gulp-csso and gulp-file-include to build my app.
Everything works fine in build except HTML stays as it was. My gulp file is set like this:
gulp.task('html', ['diststyles', 'scripts'], function () {
var assets = $.useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
diststyles and scripts are set like this:
gulp.task('diststyles', function () {
return gulp.src('app/styles/scss/*.scss')
.pipe($.sass({
errLogToConsole: true,
includePaths: ['app/bower_components/foundation/scss'],
}))
.pipe($.autoprefixer('last 2 version'))
.pipe(gulp.dest('app/styles'))
.pipe(reload({stream:true}))
.pipe($.size())
.pipe($.notify("Compilation complete."));
});
gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter(require('jshint-stylish')))
.pipe($.size());
});
the file structure I use is this:
root
+-- app
+-- bower_components
+-- components
header.html
footer.html
+-- pages
home.html
+-- scripts
main.js
+-- svg
+-- dist
+-- scripts
+-- vendor
modernizr.js
main.js
plugins.js
vendor.js
+-- styles
main.css
home.html
When I run gulp first I include components into html pages (ina pages folder) and copy them to app folder. form app folder (after include is done) html tast starts. I got all my js and css files concated and copied to dist as it should be, But in html file it rests like this:
<!-- build:css({.tmp,app}) styles/menu.css -->
<link rel="stylesheet" href="styles/menu.css">
<link rel="stylesheet" href="styles/fonts.css">
<!-- endbuild -->`
Any ideas what caused the problem and how to resolve this?
I had the same problem but the resolution was something different. It turned out that the problem was caused by the line endings.
Originally my files used windows-style line endings. That time everything worked fine. When I changed it to unix-style line endings then it went wrong. The symptom was the same as bigcat described.
I don't think unix-style line endings are wrong in general. (Obviously they aren't.:)) There were probably some misalignment between the different files I used. I had no time to investigate it further but if you have such symptoms then it's good to know where to start.
I had the same issue, and I used gulp-eol to solve that. Example of use:
var gulp = require('gulp');
var useref = require('gulp-useref');
var eol = require('gulp-eol');
gulp.task('default', function () {
return gulp.src('app/*.html')
.pipe(eol('\r\n'))
.pipe(useref())
.pipe(gulp.dest('dist')); });
It worked. I just updated all my npm modules to newer version and it started to work.
I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.