I have a site that contains the base javascript and css for a number of other sites. Most of the sites use a javascript bundle that has everything in it, although a few of them are lightweight and only use a few of the scripts. I'm learning how to use gulp to manipulate these files and mostly understand what's going on. However, I'd like to be able to perform the following sequence and I'm not sure how.
Compile my coffeescript files
Copy the compiled files to a folder
Minify the copied files
Bundle the compiled files into one file
Bundle the minified files into one file
Is there any way to make this happen all within one task?
Below the list of tools how u can do it. And the important one is documentation.
In short you have to create gulp task "build",for example, which will run tasks below.
gulp sequence
gulp coffee
gulp minify
gulp concat
and so on)
Related
I'm working on a legacy Ruby on Rails 4 codebase.
It contains hundreds of .js files...
$ find app/assets -name '*.js' | wc -l
268
In production mode, it isn't so bad because the Rails Asset Pipeline minifies them and concatenates them into one file.
But in development, page refreshes take an extremely long time.
I don't think they need to load in a specific order, but I'm not 100% sure.
I want to compile (minify and concatenate) only a specific subdir (recursively) of JavaScript files in development mode.
Is there some tool I can point at a dir and output one minified .js file?
Ideally, this would be something that could watch a dir and recompile on changes.
I suspect that maybe Browserify or Webpack might be able to do that, but it isn't obvious to me from the docs how it would work in practice.
You can use Grunt to concat/minfy all your js(or a subset). However, if you update one, you need to recompile manually.
http://gruntjs.com/
I have web pack application and want to build output multiple files not a single javascript file. for example if I have such folder structure
components
1.js
2.js
actions
1.js.
2.js
my webpack build have to compile files in same folder structure. How i can achieve that?
I tried babel cli:
babel ./src --out-dir ./lib --source-maps --presets es2015,react --plugins babel-plugin-add-module-exports,babel-plugin-transform-decorators-legacy,babel-plugin-transform-class-properties --watch
It outputs files as I wanted but getting error
Cannot resolve module
Because it does not know anything about webpack resolve.
Any suggestions?
Getting webpack to output multiple files is possible but it does have limitations. First it's important to understand how this works. Webpack actually provides a runtime script that can load code "chunks" as they are needed, this is important for large applications so the user doesn't have to download the javascript for the entire app just to see the homepage. But webpack needs to keep track of these chunks and what they're named at build time to be able to load them correctly at run time. For that reason it has it's own file naming conventions to enable this functionality. See more here: https://webpack.js.org/guides/code-splitting/. So you can require.ensure all of your deps, but they won't be named and foldered they way you describe as webpack's runtime wouldn't be able to find them in that case.
The other thing that's important to consider is that webpack is a bundler, so it's meant to bundle files. Essentially your saying you don't want to bundle your files. So if that's the case, you should probably look into using require.js. Many people have moved from require to bundlers such as Wepback and Browserify as typically it's not efficient to download every little module seperately. But, every app is different so you may in fact have a good reason to not bundle.
If you do in fact want to do some bundling but want to optimize how it's done, then I can help with that as well, and webpack is certainly a great tool for that. But I'll need to understand your use case a little more to give the best advice.
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.
What is the difference between "gulp-browserify" and "uglify.minify". Both are used to minify the files. I am trying to compress a group of JS file to a single file both serves good which is preferable.
gulp-browserify (which is no longer being maintained by the way) is used to concatenate (or to use the browserify vernacular "bundle") application files that have been written using commonJS in order to use them in the browser (which otherwise you wouldn't be able to do). The browserify application itself doesn't appear to actually have a minify option, but there is a plugin you can use that does minify the files after they have been bundled.
Uglify will just minify "normal" JavaScript files. If you want them concatenated then you would also need to add something like gulp-concat to your gulp configuration in order to do that.
Do you know if it is possible to build a js file (jquery for example) with another file that contains coffeescript? The end result is to obtain a single JS file.
Use a build tool like Grunt.
Compile and merge coffeescript files with grunt contrib coffee and then use a build task to merge the javascript files and compiled coffeescript files into a single file: http://gruntjs.com/sample-gruntfile
You may also take a look at grunt contrib uglify