I have a project that runs both a build using rollup and a build using browserify for two different outputs. Now, they are both located in the same root dir and I have separate gulp-tasks running for both of them.
My problem is that my browserify task wants a .babelrc file with the following configuration:
{
"presets": ["es2015"]
}
and my rollup task wants this configuration:
{
"presets": ["es2015-rollup"]
}
My question is, can I have two separate .babelrc files and configure which one to use in my gulp and karma config?
I looked around a lot before asking this question and right after I posted I found a possible solution:
gulp.task('rollup', () => {
return gulp.src('src/server/index.js', { read: false })
.pipe(rollup({
plugins: [babel({
presets: ["es2015-rollup"],
babelrc: false
})]
}))
.pipe(gulp.dest('public/'));
});
By configuring one of the tasks to not use the babelrc I could of course configure it myself directly. This isn't a great answer and I would've preferred to just added the name of a babelrc file.
Related
I have the following setup:
// watch for changes
gulp.task('watch', function () {
gulp.watch('./assets/**/*.less', ['compile-less']);
});
gulp.task("compile-less", () => {
return gulp.src('./assets/build-packages/*.less')
.pipe($.less({
paths: [ $.path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(OutputPath)); // ./dist/styles/
});
So basically every time a developer changes something in a less file it runs the task 'compile-less'. The task 'compile-less' builds our package less files (including all the #imports). The first change in a random less file works, all the less files are being build. The second time it runs the task but my generated dist folder isn't updated when I change something to a less file that is imported. I'm wondering if the combination of the watch task and the compiling task somehow caches files. Because if I run the compile-less task manually it works everytime.
Does anyone had the same experience?
gulp-less version 4.0.0 has a strange caching issue.
Install gulp-less#3.5.0 and will solve the issue.
This will be fixed. Check out https://github.com/stevelacy/gulp-less/issues/283#ref-issue-306992692
So consider the following script command to run via npm run: webpack -p --optimize-minimize
Is there any way to say: Keep comments?
webpack version 2 is used.
In most applications you would not want to keep comments, but in this particular case I want to keep them, while still minifying the "script" Is this possible?
Webpack's webpack.optimize.UglifyJsPlugin has a couple of options which might fit your needs.
comments options accepts a regex or function to tell UglifyJs which comment to preserve.
extractComments let you even extract the comments to separate txt files.
Set it up like this:
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: true, // or function/regex
// Further UglifyJs config
})
],
I am struggling with a very strange issue with gulp build. I created a project using jhipster with angular 1. When I build the war for prod using mvn clean install -Pprod or just do gulp build, all my images files under content/images are copied properly to www/content/images. My HTML templates are minified and merged into 1 single app-f88bd0c8d7.js file under www/app folder. However, when I run the app and my index.html is opened, for few of the images I get 404 error even though those images are there in the war under content/images folder. The problem is with the name using which the images are being referred. For ex. my rev-manifest.json file under temp folder shows below entry - "fav-1.png": "fav-1-013b104b51.png", but this file is referred in my app-f88bd0c8d7.js as fav-1-013b104b51-57eab5e392.png, so if you notice its appending "-57eab5e392.png" extra. This happens only for few images(not same images, keeps on changing) every time I do gulp build.
I read quite a few forums on SO and went through open issues on git, but nowhere I see anyone facing this kind of issue. I tried below solutions but none worked:
1) Added a task for clearing gulp-cache as below and invoked it during gulp build -
var cache = require('gulp-cache');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['clearcache','copy', 'inject:vendor', 'ngconstant:prod', 'languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
2)Tried commenting out below lines :
a) .pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
b).pipe(rev())
c)gulp.watch(config.app + 'content/images/**', ['images']);
My jhipster version is 3.4.2 and gulp version is 3.9.1
Does anyone know why this might be happening?
Posting my comment as answer : I tried updating the git-rev version to 7.1.2 from 7.0.0 but it has same issue. So I just commented out .pipe(rev()) and it worked. No hashing of files happening now. Tried it last time as well, not sure why it didnt work. Anyways, it's working now. Will post the same as answer in case someone finds it useful.
I have just started using Webpack via a recommendation and am looking for some guidance on how it should be implemented for build and deploy purposes.
I currently have it up and running nicely using webpack-dev-server and some Gulp tasks.
Traditionally I would use Gulp or Grunt to concat files among other things and then use the task runner to copy all my files and assets to a dist or build directory from where I would deploy everything.
At the minute, Webpack does it's thing and builds the bundle file, images etc and then copies them to the build dir, using the [hash].js naming convention.
So my question is, what is the standard practice for then copying over my index.html file and then correctly linking it to the js file to be used in production.
Unless I am completely misunderstanding how Webpack should be used, should there not be some way for me to do this, with the ultimate outcome being me having the ability to navigate to the build dir and see my app up and running as it should be?
I am currently using a plugin to move my index.html. Make sure your webpack.output.publicPath points to your site so it can link images and other resources.
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack_config = {
//Other configs here
output: {
publicPath: 'http://localhost/'
},
//Other configs here
plugins:[
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'},
], {
ignore: [
'*.txt',
{glob: '**/*', dot: true}
]
})
],
//Other configs here
}
I have the following code fragment in my gulpfile.
gulp.task('static', function() {
return gulp.src(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'])
.pipe(gulp.dest(outputDir + '/'))
});
gulp.task('watch', function() {
gulp.watch(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'], ['static']);
});
gulp.task('dev', ['static']);
gulp.task('default', ['watch', 'dev']);
If I run gulp dev, gulp watch or gulp static, everything works fine. However, if I run just gulp (default), it does the static task 5 times. Can anyone help me out with why this is happening?
P.S. The paths passed to watch are such because if I don't disclude the directories as separate paths, it seems to be copying the empty directories js and scss for some reason.
Probably because you're not returning the tasks, and you need them to be asyc.
See this: Gulp.js task, return on src?
and the docs (also linked in SO post above) https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
Also, the dev task looks redundant in its current form - you may as well use the task static directly, unless you plan to bundle in more tasks with dev