We Keep Coding

Babel Brunch doesn't seems to compile #polymer/lit-element module

I'm trying to integrate Lit-element into brunch. However, it seems like Babel plugin doesn't try to compile the lit-element module into the output, as it still use the original ES6 syntax of import / export.
Here's my brunch config :
`
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
// joinTo: 'js/app.js'
joinTo: {
'js/app.js': [
/^node_modules/,
/\app.js$/
],
'js/editor.js': [
/\editor.js$/
],
'js/select.js': [
/select.js$/,
]
}
},
stylesheets: {
joinTo: 'css/app.css',
order: {
after: ['../priv/static/css/app.scss'] // concat app.css last
}
},
templates: {
joinTo: 'js/app.js'
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to '/web/static/assets'. Files in this directory
// will be copied to `paths.public`, which is 'priv/static' by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
'static', 'css', 'js', 'vendor'
],
// Where to compile files to
public: '../priv/static'
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
},
sass: {
mode: 'native'
},
uglify: {
mangle: false,
compress: {
global_defs: {
DEBUG: false
}
}
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
}
Here is my app.js code
import {LitElement, html} from '#polymer/lit-element'
function autoComplete(options){ ... }
export var App = {
autoComplete
}
And last is the compiled code, along with console log :
...
require.register("#polymer/lit-element/lit-element.js", function(exports, require, module) {
require = __makeRelativeRequire(require, {}, "#polymer/lit-element");
(function() {
import { PropertiesMixin } from '#polymer/polymer/lib/mixins/properties-mixin.js';
// "Uncaught SyntaxError: Unexpected token {" on above line
import { camelToDashCase } from '#polymer/polymer/lib/utils/case-map.js';
import { render } from 'lit-html/lib/shady-render.js';
export { html, svg } from 'lit-html/lib/lit-extended.js';
...

Grunt + Browser sync: no CSS injection or ghost mode

I'm encountering some confusing issues with getting the browser sync plugin for Grunt to work properly. I have thoroughly read the docs and followed examples but there are a couple of things that won't work:
1) I'm not getting any CSS injection. I know I am running the plugin alongside a watch task, but I have watchTask: true set and my terminal is showing that bS is identifying the change to my CSS, it's just not reloading the browser.
2) None of the ghost mode options seem to work for me. I have set them all to true but, much like the livereload feature, I'm not able to make it work.
Here is my current Gruntfile:
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
watch: {
less : {
files: ['static/css/less/*.less'],
tasks: ['less']
},
html : {
files: ['*.html']
},
js : {
files: ['static/js/*.js']
}
},
less: {
development: {
options: {
paths: ["css"],
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"static/css/styles.css": "static/css/less/styles.less"
}
}
},
browserSync: {
default_options: {
bsFiles: {
src: [
"static/css/*.css",
"*.html"
]
},
options: {
watchTask: true,
server: {
baseDir: "./"
},
ghostMode: {
clicks: true,
forms: true,
scroll: true
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-browser-sync');
// Launch BrowserSync + watch task
grunt.registerTask('default', ['browserSync', 'watch']);
};
Any help would be really appreciated

generate source map with grunt closure compiler?

Is there a way to generate source maps with grunt closure compiler?
I tried both grunt-closure-compiler and grunt-closure-tools but I can't seem to get it to generate the source map file.
Here are my settings:
Here I tried both inside options and outside, both with the value true or path/to/src.map. I couldn't find documentation for this.
'closure-compiler': {
lib : {
closurePath: 'closure-compiler',
js: 'path/to/src.js',
jsOutputFile: 'path/to/output.js',
maxBuffer: 10000,
// sourceMap: true / 'path/to/src.map'
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5',
externs: ['externs/*.js'],
// sourceMap: true / 'path/to/src.map'
}
}
},
Here I followed the docs but could not get it to work.
closureCompiler: {
options: {
compilerFile: 'closure-compiler/build/compiler.jar',
create_source_map: 'path/to/src.map',
compilation_level: 'ADVANCED_OPTIMIZATIONS',
externs: ['externs/*.js']
},
lib : {
src: 'path/to/src.js',
dest: 'path/to/output.js'
}
}
What am I missing?

For grunt-closure-compiler, this works in my project:
'closure-compiler': {
dev: {
js: ['src/**/*.js'],
jsOutputFile: 'dist/js/output.js',
maxBuffer: 500,
noreport: true,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
warning_level: 'VERBOSE',
use_types_for_optimization: undefined,
output_wrapper: '(function(){%output%\n}).call(window)',
create_source_map: 'dist/js/output.js.map'
}
}
}

Live reload using grunt-contrib-connect and grunt-contrib-watch

I am new to nodeJS and grunt. I have this Gruntfile in this project and I want to do live reload for all the html files in my project, so that I do not have to refresh my browser all the time to detect new changes. Somehow I encounter error with the following code:
module.exports = function (grunt)
{
// Project configuration.
grunt.initConfig(
{
// Task configuration.
jshint:
{
options:
{
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {}
},
gruntfile:
{
src: 'Gruntfile.js'
},
lib_test:
{
src: ['lib/**/*.js', 'test/**/*.js']
}
},
connect:
{
server:
{
options:
{
hostname: 'localhost',
port: 80,
base: 'src',
keepalive: true,
livereload: true
}
}
},
watch:
{
options:
{
livereload:true
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['connect', 'watch']);
};
It seems that when I start 'grunt default' it would not execute task watch because during connect it is keepalive.
I will be grateful if any1 can explain to me why I have this error when JSHint check my code and suggest a solution to this.

Your watch task does not have any tasks or files. For it to work with grunt-contrib-connect, you need to include more than just the livereload option, like so:
watch: {
options: {
livereload: true
},
taskName: { // You need a task, can be any string
files: [ // Files to livereload on
"app/js/*.js",
"app/templates/*.html"
]
}
}
Or alternately:
watch: {
taskName: {
options: { // Live reload is now specific to this task
livereload: true
},
files: [ // Files to livereload on
"app/js/*.js",
"app/templates/*.html"
]
}
}
All files that match the glob patterns here should then work as you're expecting. You do not need to specify a tasks parameter here if you are just live reloading these for the browser.
Also, if you are going to be using your connect server alongside watch, you should remove the keepalive parameter as it is a blocking task and can prevent executing the watch task:
connect: {
server: {
options: {
port: 8080,
base: 'src',
livereload: true
}
}
}

You need node:true in your jshint config, take a look at this example .jshintrc.
For the watch and livereload, you need to specify which files to watch, and what tasks to execute in your Gruntfile, again, take a look at this sample Gruntfile.
For example like this:
watch: {
coffee: {
files: ['<%%= config.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}'],
tasks: ['coffee:dist']
},
}
In this example, you specify a glob as files option and whenever that files change the according tasks are run.

How to output two files using grunt durandal

I am having a go at grunt for optimizing my Durandal SPA. It seems to work great but now I would like to output a second file called libs.js which is the merged uglified version of all my required libraries but my first dist is getting ignored and still the only file I get is main-built.js
I only get one file so app/libs.js never gets created. I also have no grunt errors.
Here is my Gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
durandal: {
libs: {
src: [
"../scripts/jquery-1.9.1.js",
"../scripts/typeahead.js",
"../scripts/jquery-ui-1.10.3.js",
"../scripts/knockout-3.0.0rc.js",
"../scripts/toastr.js",
"../scripts/q.js",
"../scripts/breeze.min.js",
"../scripts/bootstrap.js",
"../scripts/moment.js",
"../scripts/lodash.js",
"../scripts/respond.js",
"../scripts/knockout-sortable.js",
"../scripts/knockout-bootstrap.js",
"../scripts/knockout.validation.js",
],
dest: 'scripts/libs.js',
options: {
uglify2: {
compress: {
global_defs: {
DEBUG: false
}
}
}
}
},
dist: {
src: [
"app/**/*.*",
"scripts/durandal/**/*.*"
],
options: {
baseUrl: "app/",
mainPath: "app/main.js",
out: "app/main-built.js",
uglify2: {
compress: {
global_defs: {
DEBUG: false
}
}
}
}
}
}
});
grunt.loadTasks('tasks');
grunt.registerTask('default', ['durandal']);
};

This is JavaScript. If you create an object like { a: 'a', a: 'b' }, the first key will be overwritten by the second by the VM.
Instead of configuring it like this:
dist: {
// config goes here
},
dist: {
// config goes here
}
Try
libs: {
// config goes here
},
main: {
// config goes here
}