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.
Related
I just recently purchased a bootstrap template (https://themes.getbootstrap.com/product/directory-directory-listing-bootstrap-4-theme/) from bootstrapious that is written using Pug, Gulp, and SASS. I should also note that I am relatively new to template engines and Gulp itself.
The past few days I have been working on trying to understand how I can extend the template with Express JS so that I can call routes to call REST functions from my backend Spring Boot Application. However, no luck so far...
What I have tried:
Creating an Express JS green field project, installing Pug and BrowserSync to compile the .scss files. However, when I call the Pug file from an express route, there's no styles, even though I have imported them. Express JS seems like it's not importing the compiled SASS styles. This seems like the way to go, but I haven't been able to get the styles to be imported correctly so that the page looks like it should which is why I moved onto the second thought process.
I have also tried to start the express server parallel to when I start the front end using gulp so that I can call the routes from the express server. But this "solution" seems like really bad practice and also hasn't worked...
Is my though process correct that the first option should be the one that I go with? How do you normally include compiled SASS styles into a Pug file? Does anyone have a good example of how to do so? Part of the problem might also be that I can't really wrap my head around how something like this is usually done, since I haven't found a reference implementation that I can base my project on.
So far I haven't found good information on the subject which is why I'm reaching out to the SO Community.
Thanks a bunch beforehand
Turns out that the same team that developed the gulp / pug version of the template, also created a reactjs version of it.
Solution was to buy the react version and refund the other one :)
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 :)
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.
What's the best practice for minifying and bundling js/css in a pure front end app, and how do the tools work?
I know how this can be done with server side apps like .NET/Java/LAMP/etc. But what about pure front end projects, SPA projects or backendless projects that are built with say, ember or angular these days? Say your entire project consists of HTML/css/js, which interfaces with a RESTful service elsewhere.
What kind of process or tool do you use to minify and bundle the resources for that?
I've seen grunt plugins that exist for this, but I find the documentation to be pretty magical and it's still unclear to me how they work.
Specifically, does the tool:
1) Replace src="/js/a.js",src="/js/b.js" with src="/js/bundle-a+b.min.js"? (and likewise with css?) in the source html files?
2) have different modes for dev and release, or is the tool only run when the project is released?
Or are the resource requests entirely managed by a js tool and js/css files have to be requested via a library function? Wouldn't the lag be noticeable in this case?
Thanks.
Through the use of Build tools front end devs can have minified javascript, css, or even images and html files automatically minified as they develop. The most common is grunt, with gulp close behind.
You configure grunt tasks, like grunt-contrib-uglify and grunt-contrib-copy, and put those tasks under a grunt-contrib-watch task. Have the grunt watch task watch the files you modify, and every time a change is detected those .min files are automatically generated.
These build tools have no impact on your application, they are run before the files are servered. You were correct to assume there was an easy way to do this. I suggest you look at grunt getting started, a sample gruntfile, or a project that uses grunt - here's mine, it does minification like you requested. Clone my repo, run sudo npm install, then sudo grunt. I don't have watch set up in my project but grunt is very well documented.
I have many JS snippets and files shared across multiple projects. I have to either copy-past them into a single file for each project, or serve them as individual files on cdn. Both are bad ideas.
Is there any dependency management and build tool like Maven for JavaScript? Ideally it would take a set of js dependencies and build a single js file which can be served on cdn.
I can write a script to do that. But I'm looking to find if anything comparable to Maven exists for JS.
Update 2014: Based on answers here and my research following are most popular tools:
Bower, NPM, RequireJS, Browserify, Webpack, Grunt, Gulp
There's RequireJS, but that's kind of a different thing than Maven, and what you're asking it to do is different than Maven too. There are any number of JS combiner/minifiers, like jekyll-combiner and a zillion others.
If you're using Maven, the JavaScript Maven Tools might be of interest. If you're not, I don't know of a unified way to specifiy, download, combine, etc. for arbitrary build systems. Some of the node.js stuff might be useful, but I've never used that outside of a node.js context, so I'm not sure.
http://webjars.org/ packages JS libraries as JAR files and makes them available under Maven.
RequireJS is not a replacement to WebJars; it complements it.RequireJS will use public JS files (on CDNs) at runtime, whereas Webjars will download the necessary files at build-time and have you host them yourself.
Because most JS files are not hosted on CDNs, I use Webjars to download the necessary JS files at build-time, and reference them using RequireJS. That way I get the best of both worlds.
Take a look to grunt. It's very flexible build tool for javascript projects. Used by jquery team and other big projects. It combine, minify, test, lint js files, wtitten in javascript, have dozens plugins for whatever you want