For some reason, gulp-inject recently started taking a long time (3 minutes). Previously it would take a few seconds. I'm not sure where to begin when diagnosing this issue. Here's my output:
[18:04:39] gulp-inject 1 files into index.html.
[18:04:39] gulp-inject 277 files into index.html.
[18:04:39] Finished 'inject' after 380 ms
[18:04:39] Starting 'html'...
[18:04:39] gulp-inject 1 files into index.html.
[18:07:40] 'dist/' styles/app-9bd553d2.css 284.75 kB
[18:07:40] 'dist/' styles/vendor-28fa652f.css 188.21 kB
[18:07:40] 'dist/' scripts/vendor-2308930e.js 1.93 MB
[18:07:40] 'dist/' scripts/app-efe218d1.js 368.71 kB
[18:07:40] 'dist/' index.html 769 B
[18:07:40] 'dist/' all files 2.77 MB
[18:07:40] Finished 'html' after 3.02 min
Is there a verbose option that I'm not aware of? Any help would be appreciated.
Probably it's not gulp-inject which is slow. It's minification of JS/CSS which is slow. If you do something like this in your gulp build file
.pipe(config.production ? $.uglify() : $.util.noop())
.pipe(config.production ? $.csso() : $.util.noop()
.pipe(config.production ? $.htmlmin() : $.util.noop())
(you can read how to have this config.production variable in you script here: https://knpuniversity.com/screencast/gulp/minify-only-production )
Then most likely it will dramatically speed-up your build procedure in a non-production environment.
Related
I am trying to instruct Babel to not transpile a specific directory (in the same way that it excludes node_modules).
I am using Next.js. When I run the build, it becomes extremely slow because babel is crawling through a massive js file until it gives this message:
The code generator has deoptimised the styling of /PATH/ as it exceeds
the max of 500KB.
in babel.config.json:
{
...,
"exclude": ["node_modules", "prisma"]
}
Babel Version: 7.12.13
I'm using Webpack to bundle my React + Typescript app and want to use SASS for styling. I was able to add SASS compilation and inclusion of styles by using the sass-loader, css-loader and style-loader like this:
rules: [
...,
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
]
However, I now want to add the mini-css-extract-plugin to extract the compiled CSS to a separate file, but I can't get it to work:
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css',
})
],
...,
rules: [
...,
{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
I'm not getting any errors, but I don't see any file by the name of main.css being created. How do I get this to work?
asset bundle.js 274 KiB [emitted] [minimized] [big] (name: main) 1
related asset
asset main.css 107 bytes [emitted] (name: main)
Entrypoint main [big] 274 KiB = main.css 107 bytes bundle.js 274 KiB
runtime modules 1000 bytes 5 modules
orphan modules 769 bytes [orphan] 4 modules
cacheable modules 468 KiB
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB 12 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/webpack/hot/*.js 1.42 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB
./node_modules/scheduler/index.js 198 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB
[built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Style/Main.scss 106 bytes [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (274 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (274 KiB)
main.css
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.11.0 compiled with 3 warnings in 7223 ms
ℹ ｢wdm｣: Compiled with warnings.
The problem is you missed to include your main css file into your webpack entry point so no css files found.
As long as you import your main css file, then it would work:
index.tsx
import "./Style/Main.scss";
I am able to compile my web page using Google's Web App Starter Kit. However, upon running gulp serve:dist, my page is brought up with a different looking font than the default Roboto Condensed I expect. Instead, the font changes to what seemingly looks like default Roboto.
Terminal log does not indicate any errors and my dist folder indicates that I all my fonts are of Roboto Condensed. I've also tried testing on both chrome and safari but both show a different font:
~> gulp serve:dist
[21:26:17] Using gulpfile ~/dev/xxxx/gulpfile.js
[21:26:17] Starting 'clean'...
[21:26:17] Finished 'clean' after 33 ms
[21:26:17] Starting 'default'...
[21:26:17] Starting 'styles'...
[21:26:20] styles all files 92.91 kB
[21:26:20] Finished 'styles' after 2.6 s
[21:26:20] Starting 'jshint'...
[21:26:20] Starting 'html'...
[21:26:21] Starting 'images'...
[21:26:22] Starting 'fonts'...
[21:26:22] Starting 'copy'...
[21:26:22] Finished 'jshint' after 2.51 s
[21:26:23] html all files 51.2 kB
[21:26:23] Finished 'html' after 3.22 s
[21:26:24] copy all files 53.49 kB
[21:26:24] Finished 'copy' after 2.41 s
[21:26:25] fonts all files 1.09 MB
[21:26:25] Finished 'fonts' after 2.82 s
[21:26:25] images all files 27.96 MB
[21:26:25] Finished 'images' after 3.75 s
[21:26:25] Finished 'default' after 7.76 s
[21:26:25] Starting 'serve:dist'...
[21:26:25] Finished 'serve:dist' after 59 ms
[WSK] Local URL: http://localhost:3000
[WSK] External URL: http://xx.xx.xxx.xxx:3000
[WSK] Serving files from: dist
Anyone know how I can preserve the original Roboto Condensed font in the dist build? Thanks
I have set up the grunt-contrib-watch task to copy a list of files to a "dist" directory every time I save one of the files of the "src" directory. Unfortunately it takes 7 to 9 seconds to accomplish this task.
I have heard about the "spawn" option for grunt-contrib-watch. Using load-grunt-tasks to load the config of each task from a separate JSON file, I changed my watch.json so that it looks like this :
{
"service": {
"files": [
"src/*.php"
],
"tasks": [
"copy:service"
],
"options": {
"spawn": "false",
"livereload": "true"
}
}
}
...but setting it to false doesn't seems to change anything : it still takes 7 to 9 seconds to run. I installed time-grunt to monitor the task timing, here is what I got when saving a file :
When saving a file, I got the following output :
Waiting...
>> File "src\myfile.php" changed.
Running "copy:service" (copy) task
Created 7 directories, copied 120 files
Done, without errors.
Execution Time (2015-06-04 11:38:23 UTC)
loading tasks 333ms ██████████████████ 40%
copy:service 490ms ██████████████████████████ 60%
Total 823ms
Completed in 7.105s at Thu Jun 04 2015 13:38:24 GMT+0200 (W. Europe Daylight Time)
So it looks like the task in itself took less than a second, meaning that Grunt itself would take 6 seconds to load ? That seems pretty high. I'm on Windows 7, I've heard that on Windows there could be some performance issues.
Same problem here, after changed and execute task all modules was reload.
But i found a very good solution on github
(https://github.com/steida/grunt-este-watch)
What's wrong with official grunt-contrib-watch?
It's slow and buggy, because it uses combination fs.fileWatch and fs.watch, for historical reason. From Node 0.9.2+, fs.watch is ok.
What to do?
install grunt-este-watch
npm install grunt-este-watch --save-dev
change contrib watch
grunt.loadNpmTasks('grunt-contrib-watch');
to este watch
grunt.loadNpmTasks('grunt-este-watch');
change task
watch: {
javascript: {
files: 'src/js/**/*',
tasks: ['uglify']
}
}
to
esteWatch: {
options: {
dirs: ['../src/**/*']
},
'js': function(filepath) { return 'uglify' }
}
So today is my first day playing around with gulp and grunt or any task runner for js. I got to a place where I was able to change my code in my js files and then run the
gulp browserify
this works fine. However it was annoying and I wanted to add a watch to this so that when I make any changes to the scripts, it would automatically run gulp browserify or something and I would not have to do it manually. So here is what I did to my gulp.js
var gulp = require('./gulp')({
});
gulp.task('watch', function() {
// Watch .js files
gulp.watch('jsfolder/**/*.js', ['scripts']);
});
gulp.task('release', ['build']);
gulp.task('build', ['scripts', 'browserify']);
gulp.task('default', ['watch']);
so when I do this
gulp watch
and when I save my changes it gives me
14:37:21] Starting 'clean'...
[14:37:21] Finished 'clean' after 3.18 ms
[14:37:21] Starting 'concat'...
[14:37:21] Finished 'concat' after 263 μs
[14:37:21] Starting 'checksum'...
[14:37:21] Finished 'checksum' after 19 ms
[14:37:21] Starting 'scripts'...
[14:37:21] Finished 'scripts' after 455 μs
[14:38:41] Starting 'clean'...
[14:38:41] Finished 'clean' after 2.9 ms
[14:38:41] Starting 'concat'...
[14:38:41] Finished 'concat' after 218 μs
[14:38:41] Starting 'checksum'...
[14:38:41] Finished 'checksum' after 18 ms
[14:38:41] Starting 'scripts'...
[14:38:41] Finished 'scripts' after 302 μs
but my changes never make show up on pages. I am assuming that its just watching and not building? What am I missing?
EDIT
I added this
gulp.watch('ui.id.go.com/public/**/*.js', ['scripts','browserify']);
but now its checking it way too often and even though updating, my machine cpu is hiked up!! any better ideas out there?
thanks
You should use Watchify with Browserify to watch file changes with less performance costs. When your application begins to expand, your codebase will take to much time to bundle because Browserify rebuilds every file, even if only one file has changed in the latest modification.
Watchify only rebuilds what it needs to. The initial build (when you run a gulp task) remains the same as before, but at each change, you'll see the difference.
In a 5578610 bytes JavaScript application, the initial build take 6.67s, and rebuild on file change take ~400ms. With Browserify only, there is 6.67s on every change.
To get started, install the NPM packages:
npm install browserify watchify --save-dev
Import Browserify and Watchify in your gulpfile.js:
var browserify = require('browserify');
var watchify = require('watchify');
Init the bundler (I'm using Lodash _ for the commodity). client.js is the application entry point here:
var bundler = watchify(browserify(_.assign(watchify.args, {
entries: ['./src/client.js'],
debug: true
})));
bundler.on('log', gutil.log); // Output build logs to terminal using gulp-util.
Then create your bundle() function using Watchify:
function bundle() {
return bundler.bundle()
// Log errors if they happen.
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('client.js'))
// Optional, remove if you don't need to buffer file contents.
.pipe(buffer())
// Optional, remove if you dont want sourcemaps.
// Loads map from Browserify file using gulp-sourcemaps.
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // Writes .map file.
.pipe(size(config.size)) // Checks output file size with gulp.size.
.pipe(gulp.dest('./build'));
}
Finally, runs the bundler when there is a dependency update:
gulp.task('scripts', bundle);
gulp.task('watch', ['scripts'], function() {
bundler.on('update', bundle); // On any dependency update, runs the bundler.
});
Run gulp watch and you're ready to work.
Note: you should only set entry points as bundler entries. Browserify and the dependency branch will take care of the rest, and you will not build the same file twice.
For me the problem was due to the directory structure, it appears that gulp doesn't handle relative paths that well, at least in my case.
My project was setup something like this:
/
project/
gulpfile.js
src/
app.js
build/
mybuiltfile.js
I ended up moving it all into one folder and that fixed my problem.