I've just started using babel with grunt-babel in my application. But I encounter some behavior I want to avoid:
Before babel:
(function() {
'use strict';
angular
.module('app')
.controller('Ctrl', Ctrl);
Ctrl.$inject = ['$stateParams'];
function Ctrl($stateParams) {
}
})();
After babel:
(function () {
'use strict';
angular.module('app.standingOrder').controller('Ctrl', Ctrl);
Ctrl.$inject = ['$stateParams'];
function Ctrl($stateParams) {}
})();
My grunt task looks like this:
babel: {
options: {
sourceMap: false,
blacklist: ['strict']
},
dist: {
files: [
{
src: [ 'src/**/*.js' ],
cwd: '<%= build_dir %>',
dest: '<%= build_dir %>',
expand: true
}
]
}
},
Note that babel removed blank lines, added/removed spaces that breaks previous formatting.
Is there any way to avoid this and keep my formatting?
The retainLines option will attempt to preserve your line numbers. https://babeljs.io/docs/usage/options/
I think source maps are probably the best option, though they require a bit more work to manage.
You can use the repl to see what babel's gonna do https://babeljs.io/repl/
Related
My current project uses requirejs. Now I tried to run Babel (grunt-babel) to support ES6. Unfortunately the end-result is a define inside define.
Any idea how to prevent/handle this?
Before Babel
define(["someModuleReference"], function (someModule) {...});
After Babel
define(["exports"], function (exports) {
"use strict";
define(["someModuleReference"], function (someModule) {...});
});
Here is the grunt babel config:
babel: {
options: {
sourceMaps: true,
modules: 'amd'
},
dist: {
files: [{
expand: true,
cwd: 'www/js',
src: ['**/*.js'],
dest: 'www/jstrans'
}]
}
}
I'm trying to remove my live reload script from my index.html file dynamically using Grunt's copy plugin.
The part of my Gruntfile with the code in question is here:
copy: {
main: {
files: [
{
expand: true,
src: 'index.html',
dest: 'build/',
options: {
process: function (content, srcpath){
return content.replace(/<script src = "http:\/\/localhost:9090\/livereload.js"><\/script>/g, " ");
}
}
},
I checked a regex tester and it showed that the regular expression I have above should match the script in my html.
Although the regex tester says it is legit, I have had inaccurate results with matches before, so I need help here in determining if there is a problem with my Gruntfile, or with my regular expression. Any suggestions?
your options are in the wrong place, they need to be one level higher:
copy: {
main: {
files: [
{
expand: true,
src: 'index.html',
dest: 'build/'
},
options: {
process: function (content, srcpath){
return content.replace(/<script src = "http:\/\/localhost:9090\/livereload.js"><\/script>/g, " ");
}
}
I'm new to setting up my own grunt, and this is what I have come up with. I was just wondering if someone could look it over and give me some hints/advice.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
coffee: {
compile: {
expand: true,
flatten: true,
cwd: 'src/coffee',
src: ['*.coffee'],
dest: 'src/js/',
ext: '.js'
}
},
concat: {
css: {
src: [
'src/css/*'
],
dest: 'css/.css'
},
js: {
src: [
'src/js/*'
],
dest: 'js/package.js'
}
},
cssmin: {
css: {
src: 'css/package.css',
dest: 'css/package.min.css'
}
},
uglify: {
js: {
files: {
'js/package.min.js': ['js/package.js']
}
}
},
watch: {
aspx: {
files: ['*.aspx', '*.master']
},
css: {
files: ['src/css/*'],
tasks: ['concat:css', 'cssmin']
},
coffee: {
files: ['src/coffee/*'],
tasks: ['coffee:compile']
},
js: {
files: ['src/js/*'],
tasks: ['concat:js', 'uglify']
},
livereload: {
files: ['*.aspx', '*.master', 'css/*.css', 'js/*.js'],
options: { nospawn: true, livereload: true }
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['coffee:compile','concat:css', 'cssmin:css', 'concat:js', 'uglify:js', 'watch']);
};
It does work, and reloads and compiles perfectly. I was just wondering if there may be a more effiecent way to handle this. Being my first gruntfile I know it is very far from perfect.
I would recommend load-grunt-tasks in order to cut down on the complexity of the main Gruntfile.js. It's incredibly simple to use. It allows you to split up the Gruntfile.js into a number of smaller JS files stored in a separate Grunt folder, for example:
/root
/Grunt
cssmin.js
coffee.js
watch.js
...
And then your main Gruntfile.js to load in your tasks is simply, again for example:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
}
It's all held together with YAML file called aliases.yaml that sits in the Grunt folder that details the Grunt commands and their associated processes. So with this in the YAML file:
lint:
- clear
- jshint
- jscs
You could run grunt lint and it would run those tasks.
I've found it a) a complete lifesaver, and b) helped me understand Grunt at a whole different level.
I've made an example repo for you to help explain what I'm talking about. I hope it's of some help.
How can I get the templateURL to reload when saved using LiveReload and Grunt?
angular.module('meshApp', [
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
I have a jade file views/main.jade that when I save is processed to .tmp/views/main.html, currently this works and I can see the template, however when I save LiveReload is unable reload the page.
Is there any way I can get it to work?
Also here is a link to my GruntFile incase it helps:
http://jsfiddle.net/daimz/Te5Xc/
EDIT -------------------------
When I wrote the initial answer there was not really anything really stable enough and thats why I make some adjustments to livereload. Since that time a lot changed. At this moment (early 2017) I use browser-sync & webpack, HMR.
EDIT -------------------------
I got it to work on my Angular/Ionic project.
As I assume that more people are looking for something like it I made a github repo: https://github.com/stefanKuijers/live-templates
My solution uses live.js which Martin Kool wrote (check ). I just added some code. This is how it works: You just add the path to your router in live-templates.js. The live-templates.js gets the routers routes and adds them to the live.js heartbeat.
How to use it:
- get script & save
- change the routerURL variable on line 27 to the url of your router
- include script on the page(s) where you require live reload
Let me know or and how it worked for you guys!
Cheers
I simplified my Gruntfile.js may helpful:
appPath:"", //your app path
watch: {
options: {
livereload: 35729,
debounceDelay: 500
},
gruntfile: {
files: ['Gruntfile.js']
},
css: {
//if you use less or sass,you can compile and copy here
},
js: {
files: ['<%= appPath %>/{scripts}/{,**/}*.js'],
tasks: ['newer:all']
},
html: {
files: ['<%= appPath %>/{views}/{,**/}*.html'],
tasks: ['newer:all']
},
livereload: {
options: {
livereload: 35729,
debounceDelay: 500
},
files: [
'<%= appPath %>/{,**/}*.html',
'<%= appPath %>/styles/{,**/}*.css',
'<%= appPath %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
}
and run in :
grunt.registerTask('server', [
...,
'watch'
]);
Maybe try this middleware:
var modRewrite = require('connect-modrewrite');
Then on the connect:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function(connect, options) {
var middlewares = [];
//Matches everything that does not contain a '.' (period)
middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
return middlewares;
}
}
}
You should also install modrewrite: npm install connect-modrewrite --save-dev
I am only guessing here. I hope it helps.
My grunt.js has a typical minification task:
min: {
dist: {
src: ['dist/precook.js'],
dest: 'dist/precook.min.js'
}
}
What is the simplest way to have multiple dest files? I'd like to minify into:
dist/precook.min.js
example/js/vendor/precook.min.js
The built-in min task doesn't appear to support multiple destinations, so I assume this can be achieved via a simple "copy" task. Can someone please point me in the right direction?
I'd use grunt-contrib-copy plugin:
Install with npm:
npm install grunt-contrib-copy
Modify grunt.js (add copy task definition and load copy plugin):
...
copy: {
dist: {
files: {
'example/js/vendor/': 'dist/precook.min.js'
}
}
}
...
grunt.loadNpmTasks('grunt-contrib-copy');
Optionally register copy in to grunt's default task.
The added beauty here is that you can now perform all other copy tasks as well. Even patterns are supported, like copy all minified files ('dist/*.min.js').
concat: {
css: {
src: ['UI.controls/assets/css/*.css'],
dest: 'UI.controls/assets/css/min/production.css'
},
js: {
src: ['UI.controls/assets/js/*.js'],
dest: 'UI.controls/assets/js/min/production.js'
},
js2: {
src: ['UI.core/assets/js/*.js'],
dest: 'UI.core/assets/js/min/production.js'
}
},
cssmin: {
css: {
src: 'UI.controls/assets/css/min/production.css',
dest: 'UI.controls/assets/css/min/production.min.css'
}
},
uglify: {
js: {
src: 'UI.controls/assets/js/min/production.js',
dest: 'UI.controls/assets/js/min/production.min.js'
},
js2: {
src: 'UI.core/assets/js/min/production.js',
dest: 'UI.core/assets/js/min/production.min.js'
}
},
watch: {
css: {
files: ['UI.controls/assets/css/*.css'],
tasks: ['concat:css', 'cssmin:css']
},
js: {
files: ['UI.controls/assets/js/*.js'],
tasks: ['concat:js', 'uglify:js']
},
js2: {
files: ['UI.core/assets/js/*.js'],
tasks: ['concat:js', 'uglify:js']
}
}
This is an alternative approach (next to #jalonen's solution) which may to interesting to you, IF you are using requirejs to modularize your project, then you can use the requirejs optimizer to minify your modules.
First of all, you need to add grunt-contrib-requirejs to your project:
npm install grunt-contrib-requirejs --save-dev
Grunt configuration:
requirejs: {
production:{
options:{
// don't include libaries when concatenating/minifying
paths:{
angular:'empty:',
jquery:'empty:'
},
baseUrl:'path/to/src/js',
dir:'path/to/target/js',
// keeps only the combined files
removeCombined:true,
modules:[
{name:'app', exclude: ['moduleA', 'moduleB']},
{name:'moduleA'},
{name:'moduleB'}
]
}
}
}
...
grunt.loadNpmTasks('grunt-contrib-copy');
Explanation:
Let's say you have this dependency tree (-> means depends on):
app -> moduleA -> moduleA1
-> moduleA2
app -> moduleB -> moduleB1
-> moduleB2
After minifying you will have three files:
app (minified version of app)
moduleA (minified version of moduleA, moduleA1, and moduleA2)
moduleB (minified version of moduleB, moduleB1, and moduleB2)
Had a similar problem and created a grunt multi-task that runs a list of specified tasks on multiple directories
Usage for the exact case:
```
min: {
dist: {
src: ['dist/precook.js'],
dest: 'dist/precook.min.js'
}
},
multidest: {
minifiedFiles: {
tasks: ['min'],
dest: [
'dist/precook.min.js',
'example/js/vendor/precook.min.js'
]
}
}
```