What is the babel option to rename output transpiled file.
With babel-cli it is -o
babel script.js -o script.transpiled.js
Is there a corresponding babel option that can be used with gulp-babel ?
As filename is handled for you by gulp-babel, you might want to use gulp-rename as an additional pipe
var rename = require('gulp-rename');
gulp.task('default', () =>
gulp.src('script.js')
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(rename(function(path) {
path.basename = 'script.transpiled';
path.extname = '.js';
}))
.pipe(gulp.dest('dist'))
);
Related
Have a super simple gulp file where I want to run some basic gulp tasks in sequence one after the other.
I can't seem to get this running in Gulp v4. Had something similar in Gulp v3 using run-sequence instead of gulp.series()
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', async () => {
return (gulp.src('./dist/app', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('clean-tests', async () => {
return ( gulp.src('./dist/tests', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));
The individual gulp tasks clean-app and clean-tests run fine individually.
However, when I use gulp all-tasks i get the below error
gulp all-tasks
[17:50:51] Using gulpfile ~\IdeaProjects\my-app\gulpfile.js
[17:50:51] Starting 'all-tasks'...
[17:50:51] Starting 'clean-app'...
[17:50:51] Finished 'clean-app' after 10 ms
[17:50:51] The following tasks did not complete: all-tasks
[17:50:51] Did you forget to signal async completion?
Both clean-app and clean-tests return streams which I thought would be sufficient.
Have tried using gulp4-run-sequence but i get the same error.
Want to be able to run gulp all-tasks such that clean-tests is executed after clean-app has completed successfully.
depending on the official documents here try to run cb() in your tasks like that
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', (cb) => {
gulp.src('./dist/app', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('clean-tests', (cb) => {
gulp.src('./dist/tests', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));
I'm trying to bundle external commonjs modules (react, react-dom) together with some plain ES5 files, like pollyfills.js.
I can bundle the external modules using browserify.require
var externalBundler = browserify();
config.externalModules.forEach(externalBundler.bundle);
return externalBundler.bundle()
.pipe(source("external.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ debug: true, loadMaps: true }))
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
and the other scripts using gulp.concat, however I struggle to put them toggether.
I was able to combine the pipes like this:
gulp.task('bundle-externalscripts', function () {
var externalBundler = browserify({ debug: true });
for (var module of config.externalModules) externalBundler.require(module);
var globalScripts = gulp.src(paths.scripts);
var externalModules = externalBundler.bundle()
.pipe(source("externalmodules.js")) //always convert to vinyl source stream
.pipe(buffer()); //in buffered mode
return merge(globalScripts, externalModules)
.pipe(sourcemaps.init({ debug: true, loadMaps: true }))
.pipe(concat("external.js"))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
});
I'm trying to minify and then create a copy without the "src." part of every index.src.php file inside any folder so I still have index.src.php available but a minified copy index.php:
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename(function(path){
path.basename = path.basename.replace('min\.', '');
}))
.pipe(gulp.dest('.'));
});
... so far this only literally renames the index.src.php into index.php
gulp-rename was easier than expected...
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename({
basename: 'index'
}))
.pipe(gulp.dest('.'));
});
I have this task:
gulp.task('js', function() {
var webpackConfig = extend({}, require('./webpack.config.dev.js'), {
devtool: "source-map",
});
return gulp.src(config.paths.mainJs)
//.pipe(beautify({indent: {value: ' '}}))
.pipe(named())
.pipe(webpack(webpackConfig))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(through.obj(function (file, enc, cb) {
// Dont pipe through any source map files as it will be handled
// by gulp-sourcemaps
var isSourceMap = /\.map$/.test(file.path);
if (!isSourceMap) this.push(file);
cb();
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./deployment/deployment/js'))
.pipe(uglify())//JS_Parse_Error
The output of the previous pipe ./deployment/deployment/js/ is two files: bundle.js and bundle.js.map. So I think my pipe to uglify is wrong. How can I minify webpacks output?
All I had to do was modify my './webpack.config.dev.js` file already referenced in gulp to add the UglifyJsPlugin:
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
],
I'm getting this error when trying to run my gulp command. It worked fine last week. Any reason why I'm getting the following error now?
TypeError: Object #<Readable> has no method 'write'
This is what the JS task looks like.
// JS task
gulp.task('js', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src('./src/js/*.js')
.pipe(browserified)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Here's a link to the entire gulpfile.js: https://github.com/realph/gulp-zero/blob/master/gulpfile.js
Any help is appreciated. Thanks in advance!
What version of browserify do you have at the moment? Browserify changed recently to not accept inward streams, just creating some. This would be the correct, adapted code:
var source = require('vinyl-source-stream');
var buffer = require('gulp-buffer');
gulp.task('js', function () {
return browserify({entries:['./src/js/main.js']})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Update I changed the filename to a real file. Note that browserify works best if you just have one file there. If you have to create multiple bundles, please refer to this article