There are a ton of examples out there that use glob techniques and I’m sure it would be easy enough to find a gulpfile that makes use of globs in some way. I admit it is a bit complicated to get your head around but once you understand how you can traverse up/down a file tree it gets easier to know how to write useful globs. ![]() The order I wrote the globs in matter too - I asked it to process all files except base.js, then process base.js last. The globs I’m using tells gulp to ignore all files and folders prefixed with an underscore as well as the imports folder. Globbing is the act of locating files on a filesystem using one or more globs.Īs an example, here is the scripts task I use at work:įunction scripts () I use globs in my tasks to ensure my main entry point is processed last.Ī glob is a string of literal and/or wildcard characters used to match filepaths. Doesn’t really matter, as long as your setup can process and understand it. You want it to be accessible and meaningful, and obvious that it is the main entry point for all the javascript code.Īt work, I just call my main file base.js, I’ve seen other devs call it functions.js, scripts.js, or app.js. ![]() WHen you work with other people, maybe the name of your main file actually does matter. What JS library am I using that starts with a z? (that exist yet…□)įor personal sites and projects where it’s just you working on it all, I don’t really see the problem in renaming script to something as obvious as this.īest part of this method means there is zero other config to implement, meaning you are free to work on your website instead of yet another build process! Use globs ![]() This is why renaming script.js to zcript.js works so well for me. The way concatenation usually works is it will process files alphabetically, and numerically starting at 0. The thing is, what you call your main script file doesn’t actually matter. You might’ve noticed I named my main file zcript.js. These are the most efficient ways I’ve used to overcome this problem.ĭevelopers often have scripts in a /scripts folder in their project, with one main script file for the logic, and the other files as dependencies or various other bits of code that are being imported or relied on in the main file.įor example, here’s the src folder of this entire website(not including the html/markdown): If you’re using something like Gulp, Grunt, or even Codekit, you can sometimes run into the problem of dependencies being concatenated before your main script file. Processing javascript is a little more annoying however in that it is a little harder to control the order they are processed in. Processing CSS is a little easier with Sass - the order can easily be controlled through a single stylesheet. The process of minifying/concatenating is often used before putting a site live to save extra kB when loading a page. Then just select your `site.js` file, hit Compile, and BOOM! All of your JavaScript files are compiled into a single file, with all the comments & whitespace removed, all the variables renamed, and all the other uglifying features you come to expect (as Koala makes use of UglifyJS).If you’re developing websites, you likely want to minify and concatenate your files for production. ![]() I created a single `site.js` file, and you use a proprietary syntax in that to include all the relevant JS files e.g.: I've attached a screenshot of my Koala settings. The first time I ran it, it failed (boo!), but then I selected the Harmony (ES6+) option in Koala, and it compiled everything successfully, and the game ran perfectly. It occurred to me to try it with my first Phaser game, but I wasn't holding out that much hope, because my game comprised 10 states, 18 prefabs, 2 plugins, and for the hell of it I threw in a couple of extra JS files I was using for the overall page. I realise this thread is super old, but I wanted to throw my two cents in, because a) I hate grunt, and b) the first time I tried a standard uglify call, it failed and broke everything.įor a while now I've used a free GUI tool called Koala (because I'm a sucker for a nice, simple GUI) for compressing CSS & JS in websites.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |