I am combining all my js files for production using unglify but after combining them and generating my final app.min.js file, how I can update the script src?
The index file should have only one <script> tag with app.min.js but instead its pointing to all sources that I used on develop mode.
uglify: {
options: {
mangle: false
},
all: {
files: [{
expand: true,
cwd: 'dev/assets/js',
src: ['*.js', '**/*.js'],
dest: 'prod/assets/js'
}]
},
my_target: {
files: {
'prod/js/app.min.js' : ['prod/assets/js/**/*.js']
}
}
}
Take a look at the node package 'grunt-processhtml'. It will update the source links in your html file.
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
Related
I intend to develop an angularJS client where I will use angular components. This will lead to multiple .js/.css files.
In order to avoid manually referencing each newly added js/css file I intend to use a grunt-include-source task.
The problem is that, after configuring the Gruntfile.js, the „grunt includeSource” task runs, returning „Done, without errors.” status but no update is made in the index.html file.
My project structure is the one presented in the attached picture (I use WebStorm as IDE).
My index.html file is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RavenApp</title>
<!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- include: "type": "js", "files": "*.js" -->
</body>
</html>
My Gruntfile.js is the following:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
templates: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
}
},
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
Could anyone indicate me what I have done wrong?
Thank you.
We don't need to write templates key under includeSource key:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
HTML code is enough for including js and css:
<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->
I am trying, using grunt and babel, to transpile all js6 files in a folder and end up with a concatenated single file (js5) with a working sourcemap to the original es6 files. However the sourcemapping does not work. My babel, concat settings below:
"babel": {
options: {
sourceMap : true
},
dist: {
files:[
{
expand: true,
cwd: 'wwwroot/js/src',
src: ['*.js'],
dest: 'tmp/js'
}]
}
},
concat: {
options: {
sourceMap: true
},
js: {
src: [
'tmp/js/*.js',
],
dest: 'wwwroot/js/app.js'
}
}
Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"
I am ending up with firstly a folder with a lot of js files and src maps(tmp directory). But concatinating them into one file messes up with source mapping completely.
Ideas? Also, can I somehow skip the making of temporary files and sort of just pipe the result into concat?
Reversing the order of task will make this much easier.First run the concat task on the JS files. After that run babel task on the single file created by concat task previously with the following options
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
Here the script.js.map file is the name of the source map file generated by concat task. As inputSourceMap option excepts a source map object , we pass it in using the grunt.file API's readJSON method
The full Grunt file configuration would be:
concat: {
options: {
sourceMap: true
},
js: {
src: ['Modules/**/js/*.js'],
dest: 'script.js'
}
},
babel: {
dist: {
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
src: [
'script.js',
],
dest: 'app.js'
}
}
Example project: https://github.com/pra85/Grunt-Concat-Babel-Example
Trying to get jade to save my jade files as HTML files while keeping the same file name.
So the file views/index.jade should save as dist/index.html
Same for additional files.
I am using grunt-contrib-jade
The jade configuration of my Gruntfile:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true
},
files: {
'dist/*.html': ['views/*.jade']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.registerTask('default', ['jade']);
};
But it just saves the file as *.html
I think it's doing what you are telling it to do.
Try this for configuration of the jade task:
jade: {
compile: {
options: {
pretty: true
},
files: [{
expand: true, // setting to true enables the following options
cwd: '/jade', // src matches are relative to this path
src: ['{,*/}*.jade'], // matches *.jade in cwd and 1 level down
dest: 'dist/', // destination prefix
ext: '.html' // replace existing extensions with this value
}]
}
}
here is is some information about building file lists dynamically with Grunt.
This is my Gruntfile:
'use strict';
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
site: grunt.file.readYAML('_config.yml'),
coffee: {
dist: {
files: [{
expand: true,
cwd: "<%= site.src %>/assets/scripts",
src: "{,*/}*.coffee",
dest: "<%= site.tmp %>/assets/scripts",
ext: ".js"
}]
}
}
});
grunt.registerTask('default', ['coffee']);
}
I want to have app/assets/scripts/globals.coffee look something like this:
jQuery ($) ->
window.Site = "<%= site %>"
How can I interpolate the site variable in CoffeeScript files?
I tried using plugins like grunt-contrib-handlebars and grunt-contrib-jst, but those generate JST files which I think isn't what I want.
Looks to me like a combination of Yaml and Assemble's Data would do what you need.
http://assemble.io/docs/Data.html
FTA:
YAML example
Here is the same in YAML format:
my-template.yml
title: Assemble
author: Brian Woodward
And this template:
my-template.hbs
<h1>{{ title }}</h1>
You can adapt that to insert a script tag at the top of the page that sets window.Site = {{site.name}}.
I am using standard minify/uglify for css/js files and combine multiple files to main.min.css or app.min.js... However my .html file needs to be modified to point to these new file names too in <link> or <script>
Is there a way to automate this? Or how to modify .html files automatically to rename the file names in there using gruntjs?
You can do this with grunt-string-replace. Here's an example on how you could use it.
In my index.html you find the following import tags:
<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->
<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->
Notice the 'start imports' and 'end imports' comments. By default (in DEV) we comment out the PROD import.
In my grunt file I then add the following task:
'string-replace': {
inline: {
files: {
'index.html': 'index.html'
},
options: {
replacements: [
{
pattern: '<!--start PROD imports',
replacement: '<!--start PROD imports-->'
},
{
pattern: 'end PROD imports-->',
replacement: '<!--end PROD imports-->'
},
{
pattern: '<!--start DEV imports-->',
replacement: '<!--start DEV imports'
},
{
pattern: '<!--end DEV imports-->',
replacement: 'end DEV imports-->'
}
]
}
}
}
Running the task (grunt string-replace) gives me:
<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->
<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->
Now the DEV imports have been commented out, while the PROD import is no longer commented out.
This is easily automated with grunt-processhtml. Here's an example from the docs:
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
Read more at https://www.npmjs.org/package/grunt-processhtml
A very suitable grunt task for this is grunt-html-build
It can substitute some some parts of the HTML from dev to a production version. See examples there, it is easy to setup.
Now, using the standard configuration presented for grunt-html-build, if minified files are dynamically named during build process like:
some-file.js -> another-name.min.js
One can configure grunt-html-build with:
[...]
scripts: {
bundle: [
'<%= fixturesPath %>/scripts/*.min.js'
]
},
[...]
A HTML section like:
<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->
Would yield to something like:
<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>
That is what #hyprstack is asking for in comments.
You could use grunt preprocess to do this: https://github.com/jsoverson/grunt-preprocess
Basically, you need to set up a template and have preprocess replace the relevant parts.
The Gruntfile part will look something like this:
preprocess: {
dev: {
options: {
context: {
DEBUG: true,
HOST: '<%= env.dev.HOST %>'
}
},
files: {
'index.html': 'tpl/index.tpl'
}
},
production: {
options: {
context: {
DEBUG: false,
HOST: '<%= env.production.HOST %>
}
},
files: {
'index.html': 'tpl/index.tpl'
}
}
},
I am using Middleman App do distinguish between dev vs build in my html or haml file:
- if development?
and
- if build?