How to use Gulp to fetch external javascript files - javascript

I'm fairly new to using Gulp, but i've been starting to play around with it and the fact that I can run a server with livereload just by typing 'gulp' makes me wonder where it's been my whole life.
I tend to use CDN's for external libraries but am now working on a project that doesn't allow calls outside the network, meaning I have to include the js files. Is there a way with gulp that will fetch all external javascript files, place it in one single file and minified?

I'm pretty sure you are looking for an asset like this:
gulp-bundle-assets
https://www.npmjs.org/package/gulp-bundle-assets
You can also look at these Gulp plugins for help with CDNs:
gulp-s3: With this you can uploads your static files to Amazon S3 at build time.
gulp-google-cdn: This will replace all references to 3rd party libraries with Google CDNs

Related

React-Native: Downloading and Running external Javascript files

I'm very new to React-Native. I've moved from CoronaSDK. There, in CoronaSDK, there's a plugin that allows you to download and run external lua files or lua strings and run them.
I was wondering if there was a similar feature, whether internal or external, to allow for downloading and running Javascript(React) files and run them after app build?
I saw services like CodePush, that allows for full app updates deployment. However, I wanted to see if there was something similar to downloading and running individual files.

Angular App performance with one script file vs many script files

I am working on large scale web app using AngularJs as front-end and Laravel RESTful API as back-end
Currently I am using gulp to concatenate all script files in one file including angular libraries and all modules and controllers and it's about 46,000 line of code.
Is this a good approach regrading performance?, or I've to include all script files separately.
Also Is concatenating some files and including the others is a good approach?
Thanks in advance!
Yes it is a standard approach for production
For development keep seperate files so debugging is a lot easier.
For production it is highly advisable to combine all the files and minify it.
Infact if you use webpack you can have all css , js files in one bundle
Webpack is awesome tool. Gulp would also do the job.

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

How do you separate javascript files for development?

I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.

Using Grunt/Gulp with PHP Framework

So I just started learning Laravel, and I want to build something cool with it. I've been working mostly with frontend development, particularly AngularJS, and started using RequireJS recently.
I like the way Yeoman generators set up front-end applications as far as the directory structure, (i.e. /app, /test, /dist) and would like to continue using this structure, but I want to pull it into the overall application. I also like that in most cases, the application uses unbuilt files (particularly JS) for development because it cuts down on waiting for processes.
How can I set up and structure my Laravel (or any other framework) application and templates to use a similar directory/build setup for files? The problem I keep getting stuck on is using unbuilt/uncompressed files for development, as well as a clean separation of my source vs. built front-end files.
Since starting with Laravel I have tried all sorts of Asset Management tools and methods. I ended up using Stolz/Assets, an ultra-simple-to-use assets management PHP library that can be installed with composer. It is not an ideal tool as there are some issues when minifying (particularly CSS.)
Like you though I really needed neatly compiled and minified js/css assets for production.
After much research I have ended up using Gulp.js after reading this blog post (http://www.abishek.me/using-gulpjs-with-your-laravel-application/). I immediately downloaded and installed Gulp.js and created a gulp file with my own directory structure in it. I was up and running within minutes. I have since gone on to modify my gulp file so it now compiles SASS, minifies and compresses both CSS and JS for production.
I continue to use Stolz/Assets (Asset Management Library for Laravel) for serving up my files but I do not rely on this for any compiling or minification.

Categories

Resources