I can't find documentation on how to minimize assets and produce *.min.js files using vue cli.
Im using vue cli version 4.2.3.
I require the extention to be *.min.js for rollbar to function correctly.
How would you go about configuring vue cli to produce minimized assets? (no TS involved).
I'm sure Vue CLI minifies JS output when running build in production mode. It's just using different naming convention (no "min.js")
To tweak file names of JS chunks produced by Vue CLI, you can do the following:
Check the default Webpack config Vue CLI uses by running vue inspect on command line (dev mode) or vue inspect --mode production (production mode)
Look for an output (should be near the beginning of the output). In my project it looks like this:
Dev mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].js',
publicPath: '/',
chunkFilename: 'js/[name].js'
},
Production mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].[contenthash:8].js',
publicPath: '/',
chunkFilename: 'js/[name].[contenthash:8].js'
},
Now you can tweak it - add vue.config.js to your project if you don't have it already and add following:
module.exports = {
configureWebpack: config => {
if(process.env.NODE_ENV === "production") {
config.output.filename = 'js/[name].[contenthash:8].min.js'
config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
} else {
config.output.filename = 'js/[name].js'
config.output.chunkFilename = 'js/[name].js';
}
}
}
[name] and [contenthash:8] are Webpack placeholders - more info in documentation
I want use https://github.com/just-boris/less-plugin-glob this plugin for multi importing less files.
When I run
lessc --glob styles.less styles.css
from terminal - it's work fine, but I dont understand how I could run this command like gulp-task for every style build?
Use the plugins option to pass the plugin to gulp-less. Example:
gulp.task('less', function () {
return gulp.src('./less/**/*.less')
.pipe(less({
plugins: [ require('less-plugin-glob') ]
}))
.pipe(gulp.dest('./dist/css'));
});
Every now and then, when I do a gulp build, I would get this error:
Error: EEXIST, mkdir 'Users/username/Desktop/Project/dist/fonts' at Error (native)
It doesn't happen on every build though. My gulp code to copy over fonts is:
gulp.src(paths.fonts { cwd: bases.app })
.pipe(flatten()) // using gulp-flatten
.pipe(gulp.dest(bases.dist + 'fonts/'));
Is there a way for me to fix this issue?
I believe you have to delete the old fonts/ folder first.
Use something like Gulp del:
I also like gulp-util for gulp console logs:
gulp.task('removeFonts', function(cb) {
del([bases.dist + 'fonts/'], cb);
gutil.log(gutil.colors.magenta('Fonts folder removed');
});
Then call your mkdir build.
Suppose I have a module whose source code is not ECMA 5 (e.g. it's Coffescript or Typescript or whatever) and is distributed in compiled form with a source map. How can I include this source map in a Browserify bundle?
For example imagine a project with a single dependency:
index.js
node_modules
typescript_module
(main.ts)
dist
main.js
main.js.map
The "main.js.map" is not consumed by browserify. That is, the browserify bundle source map maps to "main.js" instead of deferring to the original map which describes "main.ts"
For most transforms, there is a way to input source maps generated by the prior step, but is there a way to just preserve them on the original input files, when source maps already exist?
This appears to be a bug/non-feauture of Browserify:
https://github.com/substack/node-browserify/issues/772
Answering my own question because it's very hard to track down any discussion of this issue with google and no mention of it in the Browserify docs.
My setup is the following:
tsc --project tsconfig.script.json --outDir ~temp/ts
Compiles src/script.ts to ~temp/ts/script.js and ~temp/ts/script.js.map.
browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js
Compiles ~temp/ts/script.js to ~temp/bfy/script.js and ~temp/bfy/script.js.map.
sorcery --input ~temp/bfy/script.js --output dist/script.js
Reads ~temp/bfy/script.js; finds ~temp/bfy/script.js.map + ~temp/ts/script.js.map, and finally outputs dist/script.js and dist/script.js.map.
The dist/script.js.map file does reference the original src/script.ts file.
Requires Browserify, Exorcist and Sorcery (and of course CoffeeScript or TypeScript or whatever).
If you are using a TypeScript library that you have control over (for example in a lerna monorepo), you can enable the following compilerOptions in tsconfig.json:
{
"compilerOptions": {
"sourceMap": false,
"inlineSourceMap": true,
"inlineSources": true,
// ...
}
}
browserify should now use and transform the inlined source maps.
browserify will not read source maps that reference another file, it will only use inlined source maps with inlined sources. I have written about this in the referenced issue on GitHub browserify/browserify#772.
Alternatively, if you do not have control over the source of the TypeScript library, but you would still like to see the original source in DevTools, you can use the sourceify library someone mentioned in another answer. However, I had to patch it to work and I submitted a pull request. It hasn't been merged yet (at the time of writing this). If you wish to test it yourself, you can install it directly from my branch:
npm install https://github.com/jeremija/sourceify#sources-content
Make sure to use the global transform -g [ sourceify ], because the default transform (-t) in Browserify does not modify files in node_modules.
Have a look at sourceify.
Just install it:
npm i --save-dev sourceify
... and add it as a transform to package.json:
"browserify": {
"transform": [
"sourceify"
]
}
... and it Just Works.
Try the following:
var gulp = require("gulp"),
browserify = require("browserify"),
tsify = require('tsify'),
source = require("vinyl-source-stream"),
sourcemaps = require("gulp-sourcemaps"),
buffer = require("vinyl-buffer"),
uglify = require("gulp-uglify"),
header = require("gulp-header");
var settings = {
projectName : "test"
};
gulp.task("bundle", function() {
var mainTsFilePath = "src/main.ts";
var outputFolder = "bundle/src/";
var outputFileName = settings.projectName + ".min.js";
var pkg = require("./package.json");
var banner = [
"/**",
" * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>",
" * Copyright (c) 2015 <%= pkg.author %>",
" * <%= pkg.license %>",
" */", ""
].join("\n");
var bundler = browserify({
debug: true,
standalone : settings.projectName
});
// TS compiler options are in tsconfig.json file
return bundler.add(mainTsFilePath)
.plugin(tsify)
.bundle()
.pipe(source(outputFileName))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(header(banner, { pkg : pkg } ))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(outputFolder));
});
Note: change the paths to match your project!
My first attempt to run tests using Dojo 1.8.3 on the command line with
node was thwarted by this error message:
../dojo/dojo.js:15
ode:function(){return _25;},guardCheckComplete:_37};};if(1){var _38=location.p
^
ReferenceError: location is not defined
The workaround is to use the uncompressed source instead of the release,
since the optimized version only seems to work in a browser. Next I tried a configuration script
// bootstrap.js
dojoConfig = {
baseUrl: ".",
packages:[{name: 'dojo', location: '../dojo_src'}],
deps: ['./ui_test.js']
};
require('../dojo_src/dojo.js');
And a simple test
// ui_test.js
dojo.require("doh.runner");
doh.register("test_1", [
function four_eq_4() {
var x = 4;
doh.is(x.toString(), "4");
}
]);
doh.run();
console.log("done.");
When I run the tests doh.run() does not seem to have an effect
$ node bootstrap.js
done.
My directory structure:
/app
bootstrap.js
ui_test.js
/util/doh
/dojo_src
What is the correct way to use DOH on the command line?
The answer is simple, but not obvious. Run with load=doh to invoke the test runner.
$ node bootstrap.js load=odh