Is it possible to configure the gulpfile to output several files rather than one?
All the examples I came across demonstrate minification and concatenation of all js files into one big bundle js file the index.html would load.
When your apps get bigger and more complex using many libraries, this bundle gets bloated pretty quickly and you come to an understanding that one big bundle file is not a good fit to scale your app.
Is this concatenation a must? or can we simple minify & uglify & browserify each file to a corresponding minified version in the output folder?
Cheers
Ajar
You can definitely configure a gulpfile to output several files rather than one. For instance, I have a gulp task:
gulp.task('styles', function () {
gulp.src('dev/less/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
});
I have 5 .less files in my less folder, and they become 5 .css files with matching names in my distribution folder.
And for JavaScript files as well:
gulp.task('scripts', function () {
gulp.src('dev/landing/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
Four JavaScript files become uglified versions of themselves in my distribution/js folder.
However, this is a different question if you want to address browserify specifically. browserify builds with the intent of including any dependencies stemming from your initially included JavaScript file.
If keeping separate files is more important to you, you can look into browserify-deoptimizer
Related
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
I'm trying to learn Gulp. Got a gulp watch fine and can easily compile scss to css. This is all working.
I am stuck now though.... How can I compile multiple css files into one css file?
I am currently using:
gulp.task('styles', function () {
return gulp.src('app/css/*.css')
.pipe(concatCss('styles/bundle.css'))
.pipe(gulp.dest('dist/css'));
});
But it's not working. All that keeps happening is my app files (main.css and section.css) are output in my dist folder (this is correct) but not in one file. They are just simply compied instead of both being compiled into a styles.css file for example.
Thank you for any suggestions. As I say, I am trying to learn Gulp. I thought I had been doing well until this.
I have a homepage(index.html) which is a static html with its assets, and after user login at the homepage, it will go to the second page(home.html) which is a react app.
My folder structure is like this:
--build/
----index.html
----home.html
----home.bundle.js
----assets/
------index.css
------index.js
--src/
----static/
------index.html
------home.html
------assets/
--------homepage.css
--------homepage.js
----components/
------home.js
I want to use webpack to :
1. minify the assets of index.html
2. bundle the index.js app.
My questions are:
1. What about I bundle all the assets of index.html rather than just uglify? Is this a better approach?
2. How to use Webpack to fulfill the above 2 requirements? I know how to bundle a pure SPA but don't know how to deal with this mixed type.
Thanks
You can't uglify an html file (otherwise i will learn something today ;-)) but you can uglify your javascript to reduce the size and allow a better performance when they re loaded in the browser.
So what you can do for starting, it is too bundle all your javascript in one bundle file that you will insert manually in your html file. You can do it because in general we give a static name (e.g bundle.js) for the bundle generated by webpack.
Hope that s answering your question?
Romain
I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources.
What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed in a new folder called min. Ideally I'd like to also link into the concat process the jquery CDN's and other external js files.
Does anyone know what is the best way to do this?
Here is the code I've got so far:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
gulp.task('js', function () {
return gulp.src('js/**/*.js') //select all javascript files under js/ and any subdirectory
.pipe(concat('mynewfile.min.js')) //the name of the resulting file
.pipe(uglify())
.pipe(gulp.dest('min')) //the destination folder
.pipe(notify({ message: 'Finished minifying JavaScript'}));
});
gulp.task('watch', function() {
gulp.watch('js/**/*.js', ['js']);
});
gulp.task('default', ['js', 'watch']);
As far as I know, Gulp is a helper to manage your project locally, not by connecting to external sources.
A common approach would be to manage current library versions by a package manager like Bower – there is an integration bridge available (didn't test it though, I just update packages manually).
i'am a newbie and started to build a webapp with yeomans webapp generator and a static html 5 template. The template is able to use over 40 plugins.
The template directoy structure is like:
index.html
--assets
--css
--js
--img
--plugins
--bootstrap
--cs
--fonts
--js
...
...
My project only uses a quite little part of it.
Is it possible to determine which files are used(referenced) within the project,
and copy them automatically with a grunt task to the .tmp and .dist folder?
Currently i used httrack to find that out. But there must be a other way.
(a special grunt task or perhaps a plugin for webstorm ? )
For minifying the output i use the default task with
'clean', 'jshint', 'copy', 'usemin', 'concat','cssmin', 'uglify'
which means:
'useminPrepare', // Looks for those in your HTML
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and src/ into dist/
'usemin' // Updates the references in your HTML with the new files
For the concat task i use this code to make sure all needed files are included:
concat: {
css: {
src: ['src/**/*.css'],
dest: 'dist/assets/css/main.min.css'
},
js: {
src: ['src/**/*.js'],
dest: 'dist/assets/js/main.min.js'
}
The resulting files are quite big. Remember the bunch of plugins.
What must i do to ensure the resulting files (js/css) contain only the needed parts ? As far as i can seen uglify,cssmin etc. doesn't strip the files. Must i include here grunt-uncss or something like that ? The same goes for the html file. After minifing some parts are not working as expected..
(The best would be a generator where i just put in the complete webpage in the src folder, and the grunt build task produce out of the box an optimized dist folder, only with the need files.)
Hopefully you outhere can help me with some good advises for my both problems.
Thx.