Following is the sample usemin build configuration in my index.html file
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
For development version, I dont want to minify the scripts and i want each module into its own js file. So the index.html after running would be
<script src="js/one.js"></script>
<script src="js/two.js"></script>
For production version,I want to minify the scripts and concat them into a single file.So the index.html would be
<script src="js/myApp.js"></script>
I tried the following , but it is not working:
<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->
And run the use-min task like this (prod would be set to true in the prod task and false in dev task) -
usemin({
myApp: prod?[uglify({mangle:true})]:'',
js: prod?'':[uglify({mangle:false})]
}).
I can keep two index.html files and manage this.But I was wondering can this be achieved with a single index.html?
Thanks in advance for any help.
It looks like you're using the same pipeline id: js
<!-- build:js js/one.js -->
<!-- build:js js/two.js -->
Try using unique pipeline ids like so:
<!-- build:js1 js/one.js -->
<!-- build:js2 js/two.js -->
What about this? Merge all javascript files in 2 files like in your dev env. After that just merge those two files into one big?
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- build:myApp js/myApp.js -->
<script src="js/one.js"></script>
<script src="js/two.js"></script>
<!-- endbuild -->
Or even marge all files with one build?
<!-- build:myApp js/myApp.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
Related
I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.
I have 5 HTML files in my project and every has a useref block in the bottom like this:
<!-- build:js static/js/main.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Common JS file in all 5 files are plugins.js . I need that JS file in every HTML file and its repeating in all my files.
My second HTML file has this block (again plugins.js is there) :
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
And my fifth HTML file has this block:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
So in every file im using plugins.js and in some files i use some other libraries. But when i run task this three files are not concatenated into main.js. Only thing in main.js is content from plugins.js . Other libraries are not included into main.js.
Why is that so? Can i even use this plugin like that?
My gulp task:
gulp.task('compress:js:html', ['clear:dist'], function () {
return gulp.src('./*.html')
.pipe(useref())
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist/'))
});
All your HTML files specify the same location for the concatenated file (static/js/main.js), but they all specify different source files that should be concatenated. Depending on the order in which your HTML files are processed you end up with a different static/js/main.js. In your case the one from your first example.
You have two options:
For each HTML file specify a different location for the concatenated file:
HTML File 1:
<!-- build:js static/js/main1.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 2:
<!-- build:js static/js/main2.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 3:
<!-- build:js static/js/main3.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
This will reduce the number of requests a browser has to make for each page, but it doesn't leverage browser caching.
Refer to all JS files in each HTML file, whether you need the JS file for that specific page or not. That means you have the following in all three of your HTML files:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Since browsers will cache the resulting main.js file it will only have to be downloaded once.
I have used grunt and following is the current structure:
<!-- build:js scripts/vendors.min.js -->
<!-- bower:js -->
<script src="../file/path.js"></script>
<script src="../file/path2.js"></script>
<script src="../file/path3.js"></script>
<script src="../file/path4.js"></script>
<script src="../file/path5.js"></script>
<script src="../file/path6.js"></script>
<script src="../file/path7.js"></script>
<script src="../file/path8.js"></script>
<!-- endbower -->
<!-- endbuild -->
As defined it gives the output file vendors.min.js, But I want to get output files as follows:
vendors1.min.js
vendors2.min.js
vendors3.min.js
Is there a way to get this done?
I began a web project using yeoman angular-generator, it works great when I run grunt serve, but after using grunt build and grunt serve:dist my project is broken. The css and images are not showing up and my inspect element shows that $('.foo').masonry() is not a function. I'm very new to angular, yeoman and grunt, and am truly not sure why it is broken in grunt serve:dist but works great with grunt serve, any help would greatly appreciated.
Here is my index.html, the Gruntfile.js is unchanged since generation.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css' />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<script src="./scripts/libs/jquery-2.1.4.min.js"></script>
<script src="./scripts/libs/greensock/src/minified/TweenMax.min.js"></script>
<!-- endbuild -->
</head>
<body ng-app="yeoboyApp">
<div id="view-port" class="container-fluid">
<div ng-view="" autoscroll="true"></div>
</div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.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-touch/angular-touch.js"></script>
<script src="bower_components/skrollr/src/skrollr.js"></script>
<script src="bower_components/angular-skrollr/dist/angular-skrollr.js"></script>
<!-- endbower -->
<script src="./scripts/libs/skrollr.min.js"></script>
<script src="./scripts/libs/masonry.pkgd.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/project.js"></script>
<script src="scripts/controllers/exposurements.js"></script>
<script src="scripts/controllers/google.js"></script>
<script src="scripts/controllers/htc.js"></script>
<script src="scripts/controllers/portbound.js"></script>
<script src="scripts/controllers/massive.js"></script>
<script src="scripts/controllers/churn.js"></script>
<script src="scripts/controllers/tessalate.js"></script>
<script src="scripts/controllers/tempsense.js"></script>
<script src="scripts/controllers/website.js"></script>
<!-- endbuild -->
</body>
</html>
Is there any other info I should provide?
I have multiple html files in which I have usemin comment like this:
HTML 1
<!-- build:js scripts/vendor1.js -->
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<!-- endbuild -->
HTML 2
<!-- build:js scripts/vendor2.js -->
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<!-- endbuild -->
HTML 3
<!-- build:js scripts/vendor3.js -->
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<!-- endbuild -->
How could I concatenate files which are between build:js via Gruntfile?
And create vendor1.js, vendor2.js and vendor3.js
Thanks in advance for your help.