I'm brand new to Gulp and I was able to create a site.min.js file, which as I understand is the minified versions of my JavaScript files.
How do I take advantage of that?
I'm not sure if I'm on the right track, but should my index.html also be getting modified to only load the new min.js file?
When you minify a file, the result is a completely different file. You need to link it in your page in order to use it.
<script src="site.min.js"></script>
The production version of your index.html file should only link to the minified version and any non-minified version should be removed.
There are gulp plugins which help with this.
gulp-useref is popular
gulp-html-replace is quite flexible
gulp-usemin
gulp-htmlbuild
They all offer a similar feature where you can specify blocks within HTML comments that will be replaced by the minified version.
<!-- build:js -->
<script src="website-module.js"></script>
<script src="core.js"></script>
<!-- endbuild -->
With the right options within your gulp task, it would become:
<script src="site.min.js"></script>
Related
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
I want to install the Angular Material library in a project, but I am behind a corporate firewall and even configuring the proxy doesn't work, it seems the proxy blocks certain types of files. Is there a way to install this offline?
FYI this is my BundleConfig
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Scripts/angular-loading/loading-bar.css",
"~/Scripts/nya-bs-select/nya-bs-select.min.css",
"~/Content/angular-ui-switch.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-ui/ui-bootstrap-tpls.js",
"~/Scripts/AngularApp/app.js")
.IncludeDirectory("~/app", "*.js", true)
.Include("~/Scripts/smart-table/smart-table.js",
"~/Scripts/angular-loading/loading-bar.js",
"~/Scripts/nya-bs-select/nya-bs-select.min.js",
"~/Scripts/moment.js"));
You can either use the CDN link in your reference, as explained in the docs, or download the source from CDN.
excerpt from the docs:
<head>
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
</head>
<body>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
</body>
Or grab the Source
download from here, save of your pc and include in your project ?
It's really confusing; I don't know why they can't put a freakin' Zip archive on GitHub like everyone else that contains all the dependencies. (They include a Zip file, but without the distribution minified files.)
By looking at the source code of the Angular Material site, it seems you can use the following links to get the latest files:
https://material.angularjs.org/latest/angular-material.min.js
https://material.angularjs.org/latest/angular-material.min.css
I have a page in my MVC application with only one JavaScript file in it. Should I bundle this file or keep it as is?
My current code
#section scripts{
<script src="~/Scripts/Custom/Home/Index.js" type="text/javascript"></script>
}
I would still suggest you put that file through bundling, advantages you get:
It will get minified for production
Should you add more javascript files later, it will be just a matter of adding those to a bundle, without ever making changes to your HTML template
I've got an angular project that I started up with default yeoman settings.
Looking through how the build process works, I can't imagine how any of my bower dependencies are automatically cdnifyed and what the point of the cdnify task are.
First of all, yeoman sets everything up with wiredep, which wires in my bower dependencies into a spot into index.html. It looks like:
<!-- build:js(app) 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/json3/lib/json3.js"></script>
<!-- endbower -->
<!-- endbuild -->
Looking at my Gruntfile from Yeoman, it appears that
Wiredep forces all bower dependencies into this block
The whole block is then compiled into a vendor.js
and finally
cdnify runs, identifying any free script tags and attempting to replace with cdn'd versions.
This seems rather silly to me. But before I go into hacking up my Gruntfile, I wanted to try to make sure that my understanding is correct.
I can't simply copy-paste easily cdnify'd dependencies outside of this block, because wiredep is just going to put them back in. If I did that index.html would include jquery twice, for example. Once in vendor.js and second from a cdn.
If I want to use cdnify, then I need to get away from wiredep, and manually decide which dependencies should be cdnify'd and which shouldn't.
It seems yeoman would be smarter than this, and I wanted to make sure I'm not the dumb one here. Is it true that this setup is somewhat contradictory/redundant? Am I missing something?
update it appears that placing scripts outside of this block causes wiredep not to place them in the bower block. I can't find anywhere that says this is documented behavior, however.
You can go to the bottom of the grunt file which has registered tasks and remove things like CDNify from a task like grunt build. Grunt will then skip that step next time.
I'm beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don't need to recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.
My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.
So in development, my html file might look something like
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
But in production, I would expect it to look more like
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.
Is there a way to do this without having to manually change my html files before I distribute the app?
RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.
In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
In the example above, the modules will be concatenated to ONE file, named amd-app.js.
Edit:
This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.
The resulting index.html file (in dist) has only (if you want) one javascript file:
<script src="scripts/15964141.amd-app.js"></script>
My advice: use Yeoman to make life easier (at least for handling minification/concatenation).
First you have to compile your depency tree into one file using the r compiler. After that you can a striped down AMD loader like almond. At least you have to find a way to change the url in your index html.
Take a look at gruntjs which can automatize the whole thing, there a bunch task to like usemin that helps you with the process.