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?
Related
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>
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" -->
In my source HTML I have:
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/angular-ui-notification/dist/angular-ui-notification.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.css" />
<link rel="stylesheet" href="../bower_components/nya-bootstrap-select/dist/nya-bs-select.css" />
<!-- endbower -->
made with grunt wiredep, that works great.
Moreover I want concat all this css to one file. I don't want to add this file manually in gruntfile.js. How can I use usemin or bower-concat to do this automatically. I'm doing the same with js file and everything works correctly.
For js I have
1.
wiredep: {
task: {
src: [
'src/index.html'
]
}
},
In html
< !-- bower:js -->
< !-- endbower -->
2.
bower_concat: {
dist: {
dest: 'src/temp/js/panel-dep.js',
cssDest: 'src/temp/css/panel-dep.css',
bowerOptions: {
relative: false
},
mainFiles: {
package: [ 'path/to/its/file.css' ]
}
}
},
3.
uglify:{
options:{
manage: false
},
dist:{
files:{
'dist/js/panel.min.js': ['src/temp/js/**/*.js']
}
}
},
Then I get nice working panel.min.js and HTML with link to this file
I have some tests running with RequireJS and Jasmine. I have a Jasmine test harness file that looks like this:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
<script type="text/javascript" src="./Scripts/jasmine/jasmine.js"></script>
<script type="text/javascript" src="./Scripts/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="./Scripts/jasmine/boot.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
<script type="text/javascript">
require(["fakeTest"], function () {
window.onload();
});
</script>
</head>
<body>
</body>
</html>
My fakeTest file is very simple:
define(["require", "exports"], function (require, exports) {
describe("fake test", function () {
it("test nothing", function () {
expect(1).toEqual(1);
});
});
});
If I run this in FireFox/Chrome then everything works fine; I see one test and that it passed. If I run this with PhantomJS though, I start getting problems. Running it with the remote debugger flag I get the error:
Error: Cannot find module 'fakeTest'
phantomjs://bootstrap.js:299 in require
phantomjs://bootstrap.js:263 in require
If I try changing my harness file so that it says requirejs[("fakeTest"...... instead of just require, I get this error:
Error: Script error for "fakeTest"
http://requirejs.org/docs/errors.html#scripterror
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:140
in defaultOnError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:544
in onError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1732
in onScriptError :0 in appendChild
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1952
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1679
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:829
in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:819
in fetch
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:851
in check
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1177
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1550
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1162
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:131
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:56
in each
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1114
in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:783
in init
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1453
If I put in a completely invalid module name, I get the same errors in both cases.
I'm totally lost as to why this is happening. I've played around with changing the path for fakeTest in the harness file but nothing changes. I've simplified the harness file as much as I could, but since I'm still seeing this i'm not sure what else to try. Anyone have any ideas?
edit
I've removed everything to do with Jasmine and just have fakeTest do an alert. Now I get errors saying
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script type="text/javascript">
require(["fakeTest"], function () {});
</script>
</head>
<body>
</body>
</html>
and
define(["require", "exports"], function (require, exports) {
alert('foo');
});
"ReferenceError: Can't find variable: requirejs"
Instead of write html use karma with requirejs plugin.
karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'Scripts/**/*.js', included: false},
{pattern: 'test/*.js', included: false},
'test/test-main.js'
],
// list of files to exclude
exclude: [],
browsers: ['PhantomJS']
});
};
test/test-main.js
var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
// example of using a couple path translations (paths), to allow us to refer to different library dependencies, without using relative paths
paths: {
// Put Your requirejs config here
},
// example of using a shim, to load non AMD libraries (such as underscore)
shim: {
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
This is example files. Fix it and run
karma run
Instead of
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
use
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"
data-main="Tests/main"></script>
Move test files to Tests directory.
In Tests/main.js use Your requirejs config and run main tests file.
var deps = ['Tests/fakeTest'];
require.config({
baseUrl: '..',
paths: {
'jasmine': ['Scripts/jasmine//jasmine'],
'jasmine-html': ['Scripts/jasmine/jasmine-html'],
'jasmine-boot': ['Scripts/jasmine/boot']
},
// shim: makes external libraries compatible with requirejs (AMD)
shim: {
'jasmine-html': {
deps : ['jasmine']
},
'jasmine-boot': {
deps : ['jasmine', 'jasmine-html']
}
}
});
require(['jasmine-boot'], function () {
require(deps, function(){
//trigger Jasmine
window.onload();
})
});
In index.html run only Tests/main.js file:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" data-main="Tests/main"></script>
</head>
<body>
</body>
</html>
I have a task to cdnize my files:
gulp.task('makeCdn', function () {
gulp.src(['./Views/SharedTemplates/*.cshtml'])
.pipe(cdnizer({
relativeRoot: './wwwroot/lib',
allowMin: true,
files: [
{
cdn: "google:angular"
},
{
cdn: "google:jquery"
},
{
cdn: "cdnjs:select2"
},
{
cdn: "cdnjs:twitter-bootstrap",
package: "bootstrap"
}
]
}))
.pipe(gulp.dest('./Views/Shared/'));
});
It nicely converts the js references, e.g. from:
<script src="../../wwwroot/lib/select2/select2.js"></script>
to:
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
BUT - it leaves the css links untouched:
<link rel="stylesheet" href="../../wwwroot/lib/select2/select2.css" />
.
And an additional question, why it's making such conversion from:
<script src="../../wwwroot/lib/angular/angular.js"></script>
<script src="../../wwwroot/lib/angular-resource/angular-resource.js"></script>
to:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>