Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have around 40 JS files on all pages that needs to be loaded.How can I merge multiple js files into 1 JS file , So that I have to make less http request.
The best way is to use a task runner such as gulp. Read more on how to install it here
The following would merge all .js files in the ./assets/js directory into one file in the ./public/js directory.
// Require gulp
var gulp = require('gulp');
// Require plugins
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src(['./assets/js/*.js'])
.pipe(concat('main.min.js'))
.pipe(gulp.dest('./public/js'));
});
It is then possible to run this script with gulp scripts in the command line from within the project directory.
Use automation tools like Gulp or Grunt to concatenate, minify, build sourcemaps, and do everything you want with your sources. Sample build script looks like this:
var gulp = require('gulp'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('build-js', function() {
return gulp.src('source/javascript/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/assets/javascript'));
});
After that everything you need is run gulp build-js
Related
I created a web app using angular 7, and now I want to deploy my website. I saw this video that said that minifying or uglifying the project will be good for deployment since it reduces download time. So the video showed gulp being used to minify the project but it was shown for javascript but not typescript? I would like to know, how can I minify my project for deployment?
this is what I have in my gulpfile.js:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('minify', function() {
return gulp.src('src/app/**/**/*.ts')
.pipe(uglify())
.pipe(concat('webpage.min.js'))
.pipe(gulp.dest('/dist'));
});
gulp.task('default',["minify"]);
This question already has answers here:
Concat scripts in order with Gulp
(17 answers)
Closed 5 years ago.
I build my project with gulp, into a file called all.js.
In my workspace I have one file which I call modules.js. In this file I declare all of my namespaces.
I would like gulp to concat this file first, at the top of all.js, and only then the rest of the js files. This way I don't have to worry about files order, and any namespace being not defined.
Here is what I have tried:
gulp.src("./src/main/modules.js")
.pipe(concat("all.js"))
.pipe(gulp.src(["./src/**/*.js", "!./src/main/modules.js"]))
.pipe(concat("all.js"))
.pipe(gulp.dest(dist));
But this way, modules.js is all that I see in all.js. the rest of the files are not being written at all.
How can I tell gulp to write modules.js into all.js first, and then add the rest of the js files after it?
Thank you!
There is a way to specify the concatenation order (using 'order') in gulp:
gulp
.src("**/*.coffee")
.pipe(coffee())
.pipe(gulp.src("**/*.js")) // gulp.src passes through input
.pipe(order([
"vendor/js1.js",
"vendor/**/*.js",
"app/coffee1.js",
"app/**/*.js"
]))
.pipe(concat("all.js"))
.pipe(gulp.dest("dist"));
as explained in npm documentation and this good article. Hope this helps !
You can't use src after your concat. Use src first and add you modules.js at first followed by the rest of the scripts to make sure it works.
So gulp.src([path-to-modules.js, path-to-rest])
After that concat all and your modules.js will be on top.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a lot of js files in my View(html page),and I wonder if there is a way to
combine all my js reference to one ref .
You can use webpack to compile your javascript files and create a bundle file.
Webpack has a lot of documentation and tutorials.
If you're using .NET MVC, have a look at
http://www.asp.net/mvc/overview/performance/bundling-and-minification
If you are developing using plain JS & HTML, gulp could be an alternative with the gulp-bundle package.
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.js', {
appDir: 'app',
buildDir: 'dist',
minify: true
}));
which would take all js files in the app directory, bundle them and minify to the 'dist' directory.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to bundle through webpack or gulp+browserify except specified requires, for example ignore var module = require(pathToModule); so, that the resulting bundle also contain var module = require(pathToModule);
This can be done with webpack externals option
You can use the externals options for applications too, when you want
to import an existing API into the bundle. I.e. you want to use jquery
from CDN (separate <script> tag) and still want to require("jquery")
in your bundle. Just specify it as external: { externals: { jquery:
"jQuery" } }.
webpack.config
{
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
}
If you want webpack to ignore the external module and keep the require statement in the output you can use a null loader
loaders: [{
test: /#amperka\/.*/,
loader: 'null'
}
Use the externals setting in Webpack to specify that a required module will be loaded outside of the bundle.
{
...
externals: {
// require("jquery") is external and available on the global var jQuery
"jquery": "jQuery"
}
...
}
So then calls to require("jquery") from within your bundle will instead reference the global variable jQuery - this obviously requires that you have loaded jQuery before your bundle e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="bundle.js"></script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a script.js included in the website of my customer. This customer uses requirejs but he append script.js at the end of the body without explicitly using requirejs to load it.
In script.js i have libraries that are amd compatible and other not. The problem is that requirejs automatically load library which are amd. And i can't access them in my own library which is not amd compatible.
Do you have any idea ?
Thanks
RequireJs has the ability to "shim" configuration. In your requirejs configuration call, use the following (from the requirejs page). Backbone in this case is not a requirejs module and used as an example.
requirejs.config({
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
}
})
You can then use Backbone just like any other module:
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});