Website with node - couple of questions about browserify or webpack - javascript

I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.

You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.

Related

Whats the point of loading your CSS into Webpack?

When using Webpack, it makes complete sense to use it to package your client-side JS. But what is the purpose of using it to compile your SASS and load your CSS into your page? In the end it appears that you need to use another Webpack plugin (ExtractTextWebpackPlugin) in order to pull out the CSS when you are ready to deploy to production.
It seems like you are going full circle here. Before Webpack you load your CSS in the <head> using a <link> tag like normal. Now using Webpack you load it via your JS bundle. And now for production you use a Webpack plugin to put it right back into the <head> tag again. So what's the point?
There are already dozens of tools and methods for compiling your CSS and live-reloading it in the page without Webpack. What is the advantage of using Webpack for your SASS/LESS/CSS to begin with?
tl;dr I don't think you are looking at Webpack in its' full capacity. If you are hung up on just working with CSS preprocessors than just stick with their stand alone compliers and move on.
Webpack only reads JavaScript, so that's where Loaders come into play. When you want to start working with other file types you'll need to configure loaders to pull out the specific code and have it run the necessary tasks. It's no different than Gulp's Pipelines or Grunt's Configuration blocks.
The point of loading CSS (or any preprocessor) into Webpack is because you want to have a full fledge task runner that handles bundling your code, live-reloading, image optimization, environment variables, code optimizations, HTML templates, among everything else that's possible. You wouldn't just use Webpack as a standalone CSS Preprocessor that's not the objective.

Javascript bundling and module loading

I've recently been thrown in to clean up a project which has like 45-50 individual .js javascript files. I wonder what the best approach would be to decrease the loading size of them all. Just concatenate all files into one with npm or gulp? Install some module loader? webpack?
If you're already concatenating, minifying, and uglifying and you don't want all the files to be loaded on all the pages due to a monolithic bundle, you might be looking for something like Webpack's Commons Chunk Plugin.
This plugin walks down the tree of dependencies for each endpoint defined in your Webpack.config file and determines which modules are required across all pages. It then breaks the code into two bundles, a "common" bundle containing the modules that every page requires, which you must load with a script tag on each page:
<script src="commons.js" charset="utf-8"></script>
And an endpoint bundle for each individual page that you reference normally in a script tag placed after the commons script tag:
<script src="specificpage.bundle.js" charset="utf-8"></script>
The result is that an individual page will not have to load modules that will only ever be used on other pages.
Again, this is a Webpack plugin. I don't know if this functionality is available as a Gulp plugin, because it must have knowledge of all endpoints in order to determine which dependencies are common to them all.
I redirect you to the very good https://github.com/thedaviddias/Front-End-Checklist
In particular the following advises:
JavaScript Inline: High You don't have any JavaScript code inline
(mixed with your HTML code).
Concatenation: High JavaScript files
are concatenated.
Minification: High JavaScript files are minified (you can add the .min suffix).
You can accomplish this with a package manager such as gulp, grunt or webpack (for the most famous ones). You just need to choose what you prefer to use.
If you consider webpack, You can start with my very simple (but understanding) starter: https://github.com/dfa1234/snippets-starter
There's no much thing that you can do, basically is:
Concatenation - https://www.npmjs.com/package/gulp-concat
Minification - https://www.npmjs.com/package/gulp-minify
Instead of creating all those scripts, you can get something to re-use on yeoman, f.e. the Fountain, so it will reduce a lot of time just typing procedural code for doing the concatenation/minification.
Also if you can use some lazy load (like RequireJS or some frameworks have support to lazy load the module, like Angular) that will improve the performance of your aplication
EDIT:
If you want even more performance, you can install some compression tool in your server, for example this one for NodeJS https://www.npmjs.com/package/compression
I'm my personal opinion, if you have time, the best approach would be to read and understand the purpose of the project. Then plan a proper refactor. You are not fixing anything with concatenating, this is just a deployment step.
You should analyze which technologies are being used and if you want to maintain this code, in the long run, make a proper refactor into a much more modern stack, maybe you can take a seed project with ES6, webpack, Babel... and create a proper repository well maintained with proper modularity and dependencies resolution.
Once you have that, decreasing the load its just about adding proper tools in build time (babel, webpack, etc).
You would like to add some unit tests and continue working properly :)

How to import/merge js files based on references

In my MVC 6 app, as a replacement for the older js/css bundling & minification-system, I want to produce 1 javascript file that I can reference in my HTML. This javascript file is page/action-specific so I can't just concat all .js files in a folder.
With CSS (using LESS) I already managed to do this by using #import, the created .css file will then be a combination of the original .less file plus all the imports merged into 1 file. Now I'm trying to do the same with my .js files.
In GULP I can easily minify each seperate file, and place them in the correct folders, but I don't know how to merge them with the right files. I dont want to create a gulp task for each file/js telling what to concat.
I thought about using TypeScript to reference other js files and then compiling them with GULP to one file but this seems a bit harder. I'm open to other frameworks that can manage this as well.
In typescript using ///reference or import module doesn't actually result in an import when compiling like it does with LESS.
So for example, consider the following js or typescript-structure
scripts/common/master.js (or .ts etc.)
scripts/maincontroller/index.js (uses master.js)
scripts/maincontroller/support.js (uses master.js)
desired result after compile/merge/concat with gulp:
wwwroot/js/common/master.js (unchanged because nothing referenced)
wwwroot/js/maincontroller/index.js (concat with master.js)
wwwroot/js/maincontroller/support.js (concat with master.js)
This is an interesting design. It actually means that I don't benefit as much from my browser caching, because I end up downloading master.js three times (but in three different files) - and that is just based on the three files in your example.
If you have a large number of files, keep everything as individual files and use a module loader, such as RequireJS. This way, master.js is cached after the first page and they only need to load index.js on the next page (and so on).
If you don't have a large number of files, bundle them into a single file and load it late in the page.
GO to solution explorer and right click on your project and click add references.
Then go and browse your references files. :)
sry for bad english!
Found a way to achieve this by using http://browserify.org/ with GULP. I can use 'require('master.js')' in my index.js and browserify will concat the 2 files together. Not the easiest task but it seems to work as desired.

VS 2015- typescript does not generate javascript files

I just installed VS 2015 Community.
After building no js files are created inside the solution or the explorer.
TypeScript is part of Community. The produced .js files aren't part of the project, so you won't see them unless you turn on 'show all files' from the solution explorer. Here is the button you need to press:
Then the .js files will appear after you build:
If you're not seeing these, then check to make sure you're using this project template:
I want to thanks all who tryied to help But the solution in cordova typescript project - The compiled .ts files are inside the www\scripts\appBundle.js.
*you may need to use #Micheal Braude solution to see the appBundle.js file.
thanks agian.
I`m not sure that VS 2015 Enterprise works like Community version, but I tried to explain you, how to create Simple TypeScript project, and configure it for using step by step.
Steps
Create new HTML Application, developed for TypeScript.
When you have done it, you would get something like on image below:
It is a simple structure of application, here we have file app.ts, html view, and css style-sheet.
Configure compilation - What you should to know about this step:
ES target version
Compile single merged file or separate files.
Enter project configurations -->> Open TypeScripts Compilation tab -->>
Choose required ES version in ComboBox -->> Write path to compiled file and it name, if needed (located slightly below).
Add your first file to solution and write some code in it
Create your file.
4.1. If you prefer separate compilation then you should add dependency for your js file into html view. Usually, the *.js file compiled in the same location folder of *.ts file, that`s why targeting on you ts file when write dependency to js file
4.2. If you prefer merged compilation, first that you need - it is configure order of file, it is very simple challenge:
Add into the main file (in my case usually it is app.ts) and write in it list of your dependencies
///<reference path="path/to/file1.ts"/>
///<reference path="path/to/file2.ts"/>
Than, you should replace in html view this default script path:
with path to your final js file
Test your application:
try to add some code that would help you to be ensure that your code works perfectly
run you application and ensure that it works as you expected.
Good Luck! I hope that this post helps you in your beginnings!!
P.S. Here working project.

coffeescript, jade, stylus -> js, css asset manager? node.js

I work in coffeescript, jade and stylus.
My application serves two different "one page apps". For these apps I serve all asset in the initial payload.
I want to group, compile, and concatenate all coffeescript files and jade templeates into a single js asset and stylus files into a single css asset for each "one page app".
Then I can just leave my /public/js and /public/css alone and they will always have the current js and css asset files for the two different apps.
Has anyone setup a workflow like this before? Any ideas how I could do this?
Thanks!!
EDIT: http://blog.fogcreek.com/the-trello-tech-stack/
Through more research I found the process written about here but they don't say how they did it.
You can do this with JS pretty simply with Express + Stitch / StitchUp
Sample config:
https://gist.github.com/1094412
An alternative is also Interleave:
http://www.distractable.net/coding/javascript-builds-using-interleave
And the options for stylus middleware should sort you out for your CSS:
http://learnboost.github.com/stylus/docs/middleware.html
There's also a myriad of options over here:
http://toolbox.no.de/search?q=asset
I wrote a node app for this. It is V E R Y simple, but it works for me. The code is so simple (72 lines) you can adjust it anyway you like. Whenever you save a coffee, stylus or jade file it converts to js, css or html. It doesn't take care of file removals or any other fancy stuff. It's not perfect, but at least I know exactly how it works, which makes debugging easy.
https://github.com/Gijsjan/Template-Engine-Watcher
I wrote an open source project(MIT license) to address this problem:
Giles - https://github.com/255BITS/giles
Giles builds your static assets for you(Jade, Stylus, CoffeeScript). It can be run standalone, as a web server, or as a connect module. You can add support for other languages to Giles easily(see the github page)
You can use the connect-assets pipeline to pull compiled Jade assets into your JavaScript by making them dependencies of the CoffeeScript files that use them.
I have a blog post with the details -> Server side compiling of Jade templates with connect-assets.
I recommend using Grunt, with Grunt you can setup all kinds of workflows and tasks. I personally use mean.io as my boilerplate for most of my projects. They have a really nice Grunt file with most the tasks you need to concat and minify css and js into a single file using assetmanager. Mean.io doesn't use jade or stylus but you could easily add those Grunt tasks.

Categories