As a result of this operation I need to obtain two files: vendors.js and bundle.js. They should also be uglified, but variable names must be consistent between them, but so far it either uglification or two files.
<!-- build:js1 vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbuild -->
<!-- build:js2 bundle.js -->
<script src="js/app.js"></script>
<script src="components/stores.js"></script>
<script src="components/userInfo/UserInfo.js"></script>
<script src="components/userMenu/UserMenu.js"></script>
<script src="components/components.js"></script>
<!-- endbuild -->
Please use the already minified versions provided by AngularJS itself. You should not uglify third party dependencies when these are already provided.
Hence you should concat angular and all other angular components into one vendor file and uglify and concat your own javascript.
When you take a look at path bower_components/angular/, there should also be a angular.min.js file (as well as the other angular components).
Take a look at my default setup for GulpJS and AngularJS at https://github.com/elgervb/skeletonSPA. I use a simular approach.
Try this:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concatJS = require('gulp-concat');
gulp.task('concat-js', function () {
gulp.src(['one.js', 'two.js'])
.pipe(concatJS('first.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
gulp.src(['three.js', 'four.js'])
.pipe(concatJS('second.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
});
Related
How can i replace
<!-- vendors.js - Start -->
<script src="../node_modules/lodash/index.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script> <!--Replace with min.js-->
<script src="../node_modules/jquery-ui/ui/core.js"></script>
<script src="../node_modules/jquery-ui/ui/widget.js"></script>
<script src="../node_modules/jquery-ui/ui/mouse.js"></script>
<script src="../node_modules/jquery-ui/ui/sortable.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<!-- vendors.js - End -->
with
<script src="vendors.js"></script>
while webpack bundling ?
Can this be achieve using html-replace-webpack-plugin ?
All of the libraries you have listed are available on https://unpkg.com/.
https://unpkg.com/lodash#4.17.15/lodash.min.js
https://unpkg.com/jquery#3.4.1/dist/jquery.min.js
https://unpkg.com/jquery-ui#1.12.1/ui/core.js
https://unpkg.com/jquery-ui#1.12.1/ui/widget.js
https://unpkg.com/jquery-ui#1.12.1/ui/widgets/mouse.js
https://unpkg.com/jquery-ui#1.12.1/ui/widgets/sortable.js
https://unpkg.com/angular#1.7.8/angular.min.js
https://unpkg.com/angular-animate#1.7.8/angular-animate.min.js
My suggestion is to use: https://www.npmjs.com/package/webpack-cdn-inject and inject these dependencies into your HTML document(s) vs. trying to bundle them and add to your build times.
Let's have index.html
<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
<!-- build:js1 js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
On the output we will have 2 files in js directory: lib.js and app.js
For usemin code from this files I'm using this task:
return gulp.src(config.src.html.index)
.pipe(usemin({
css: [rev],
html: [function () {
return minifyHtml({empty: true});
}],
js: [ngAnnotate, uglify, rev],
inlinejs: [uglify],
inlinecss: [minifyCss, 'concat']
}))
.pipe(gulp.dest(config.build.root));
This task also runs ngAnnotate, uglify tasks for lib.js it takes a long time to make all this thigs working. I need to runn only these tasks for all files which will be in app.js file.
How to exclude library files from this addtional tasks ?
Is there currently a way to do relative output paths? Within gulp-useref or otherwise?
My current situation:
project_folder/
app/
index.html
about/
index.html
scripts/
index.js
about.js
In the index.html based out of app/, everything works fine:
<!-- build:js scripts/main.min.js -->
<script src="/scripts/main.js"></script>
<!-- endbuild -->
The index.html file sits next to the scripts folder so the relative path syncs up properly.
But here's the about/index.html:
If I pass in the path like this – ../scripts/about.min.js – the generated about.min.js gets output one folder too far back, resulting in this situation:
project_folder/
scripts/
about.min.js
dist/
index.html
about/
index.html
scripts/
index.min.js
With the about/index.html looking for it in <script src="../scripts/about.min.js"></script>.
If I don't pass in the relative path in about/index.html:
about.min.js ends up in the proper location, but then the path is incorrect in about/index.html – set to <script src="scripts/about.min.js"></script>.
Suggestions? I could have a different version of the useref task running at different folder levels. I've also considered figuring out some way to alter the path after everything runs through based on how far away it is from the base folder, but I'm not quite sure where to start if that's a viable choice. I just don't know if I'm missing something more obvious.
Because this is meant to be a feature in a tool I'm putting together, doing it manually each time isn't really viable.
Here's the snippet from my gulpfile.js that's relevant to this. I have a nunjucks template that runs before this happens, so that's why it works from .tmp:
gulp.task('html', ['templates'], function() {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('.tmp/**/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.csso()))
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.gzip({append: false}))
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'html'}));
});
Any help would be appreciated! Thanks for tool!
I had a similar issue. I would try adjusting your search path. Mine originally looked like this:
var assets = $.useref.assets({searchPath: './'});
changing it to this fixed it:
var assets = $.useref.assets({searchPath: ''});
Why not use absolute paths?
<!-- build:js /scripts/main.min.js -->
<!-- build:js /scripts/about.min.js -->
You would then need to move your index files to the correct locations using other gulp tasks that could depend on the above task.
gulp.task('full-build', ['partial-build'], function () {
gulp.src('index.html', { base: './' })
.pipe(gulp.dest(buildLocation));
});
I also faced similar kind of issue and find a solution. It may help others
My dir structure was like
Project_root
app
scripts
index.html
bower_component
And in the index.html file it was referencing like the following which was auto generated by inject
<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js-->
<!-- inject:js -->
<script src="/app/scripts/app.js"></script>
<script src="/app/scripts/controllers/authentication.js"></script>
<!-- endinject -->
<!-- endbuild -->
In the gulpfile I was setting up the searchPath and got some strange behavior in the output file
$.useref.assets({searchPath: ''}); >> it generated only lib.js file
$.useref.assets({searchPath: ['']}); >> it generated only app.js file
Finally both app.js and lib.js file generated with the following code
$.useref.assets({searchPath: ['./bower_components','']});
I'm using Gulp for running tasks like minify and conctat my css, js...
I use gulp-minify-css plugin for minify my css, and it's working fine... but I have one question, I need to change in my html the new routes of the .css and .js? Can I do that with a Task?
// including plugins
var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");
// task
gulp.task('minify-css', function () {
gulp.src('./Css/one.css') // path to your file
.pipe(minifyCss())
.pipe(gulp.dest('path/to/destination'));
});
Thanks!!
You can use gulp-useref plugin to extract all css files referenced in your html, minify them and save the new html with replaced references.
Here's a full working example:
index.html
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
(...)
</body>
</html>
gulpfile.js
var gulp = require('gulp');
var useref = require('gulp-useref');
var minifyCss = require('gulp-minify-css');
gulp.task('minify-css', function () {
var assets = useref.assets();
return gulp.src('index.html')
.pipe(assets)
.pipe(minifyCss())
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist/index.html'));
});
This will produce a single, concatenated and minified css in css/combined.css and the following html in dist/index.html
<html>
<head>
<link href="css/combined.css" rel="stylesheet">
</head>
<body>
(...)
</body>
</html>
Please help me. This error log in console in my angular app.
My App section:
angular.module('fbApp', [
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router',
'ui.utils',
'chieffancypants.loadingBar',
'ui.date',
'angular-underscore',
'highcharts-ng'
])
My index.html from bower:
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-underscore/angular-underscore.js"></script>
<!-- endbower -->
Where is my problem?
highcharts-ng depends on hightcharts so you need to install them both.
bower install --save highcharts
bower install --save highcharts-ng
I've come across exactly same problem. I think the answer is in the documentation. Check the git hub documentation Git hub documentation
I found the solution to this. Insert the below script tag in the index above the script tag highcharts-ng.js
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/src/highcharts-ng.js"></script>
This should remove the error.
Download highcharts.js and link it in your app. You only have the angular directive highcharts-ng .
Another way to do this via bower.json; Update the following dependencies.
"highcharts" : "*",
"highcharts-ng" : "*"
Run the bower update from the command line project directory.
Use the "highcharts-ng module
var myApp = angular.module('myApp',
[
"highcharts-ng",
"ngRoute",
"myApp.view1",
"myApp.view2",
"myApp.version"
]);
Include the following in the index.html or view
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
It looks like highcharts.js is dependent on jQuery. Verify that jQuery is loading correctly and it's the correct version.