I'm using gulp-terser to minify js files. I have a jquery file and a custom js file. When I try to run the task, the custom js code is at the beginning of the jquery file. I've tried using gulp-order with it, but still no luck.
Here's the code i'm using:
gulp.task('build-js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(concat('inv.min.js'))
.pipe(terser())
.pipe(gulp.dest('./js'));
});
thanks in advance.
I think you need to switch the position of .pipe(terser()) and .pipe(concat('inv.min.js')) and call the require().
Try this :
var gulp = require('gulp');
var terser = require('gulp-terser');
var concat = require('gulp-concat');
gulp.task('js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(terser())
.pipe(concat('inv.min.js'))
.pipe(gulp.dest('js'));
});
gulp.task('default', gulp.series('js'));
And then on your terminal, navigate to the directory where your gulpfile.js is saved and type gulp or gulp js
Got this to work by moving tersor up a step:
gulp.task('build-js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(terser())
.pipe(concat('inv.min.js'))
.pipe(gulp.dest('./js'));
})
Related
I created a project with gulp js, installed bootstrap, browse-sync and sass.
My gulpfile.js file looks like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {
return gulp.src("./sass/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});
gulp.task('start', gulp.series('sass', function() {
browserSync.init({
server: "./"
});
gulp.watch("sass/*.scss", gulp.series('sass'));
gulp.watch("./*.html").on('change', browserSync.reload);
}));
gulp.task('default', gulp.series('start'));
When I use the Ctrl + S command in HTML and SCSS files, my project is saved and browser is reloaded; but I want to do this also for my JS files. Can you help me?
Very similar to the way you are dealing with your css, but you can use other plugins like terser to compress your javascript. Here is my js function which concatenates and minifies my javascript before reloading via browsersync
const concat = require('gulp-concat');
const terser = require('gulp-terser');
function js() {
return src(['./js/*.js'])
.pipe(concat('scripts.min.js'))
.pipe(terser())
.pipe(dest('js'))
.pipe(browsersync.stream());
}
I'm trying to convert an old project that uses Bower + gulp (+ npm) into something similar, which doesn't use Bower but keeps most of Gulp.
I'm stuck with reproducing the equivalent of wiredep, ie, picking all the relevant .js and .css from third party dependencies (which now are moved from Bower to package.json), to use them for either HTML injection or bundling all .js/.css into a single file.
Before, it was doing this, using a mix of wiredep and inject:
gulp.task('inject-html', ['compile-styles'], function () {
$.util.log('injecting JavaScript and CSS into the html files');
var injectStyles = gulp.src(config.outputCss, { read: false });
var injectScripts = gulp.src(config.js, { read: false });
var wiredepOptions = config.getWiredepDefaultOptions();
var injectOptions = {
ignorePath: ['src', '.tmp'], addRootSlash: false,
};
var wiredep = require('wiredep').stream;
return gulp.src(config.html)
.pipe(wiredep(wiredepOptions))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(gulp.dest(config.srcDir), {overwrite: true});
});
Now, I've managed to do this for the .js files:
gulp.task('bundle-deps', function () {
var deps = Object.keys(packageJson.dependencies)
.map(module => `node_modules/${module}/**/*.js`);
// set up the browserify instance on a task basis
var b = browserify({
entries: './package.json',
debug: true
});
return b.bundle()
.pipe(source('genemap-lib.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // debug info for the browser
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js/'));
});
This works in building a single dependency .js. That's not like the injection above, but I'd be fine with it.
However, I can't find any way to do the same for the .css files, because this:
gulp.task('bundle-deps-css', function () {
var deps = Object.keys(packageJson.dependencies);
var depsCss = deps.map(module => `node_modules/${module}/**/*.css`);
return gulp.src( depsCss )
.pipe(concatCss("genemap-lib.css"))
.pipe(gulp.dest('dist/styles/'));
});
picks up some */demo/demo.css and then I get the error that it has a syntax error.
I'm thinking that the above methods are wrong, selecting all .js/.css is too dumb, there should be a way to select the library-exported files, not all that can be found in its directory (ie, the gulp equivalent of wiredep).
But how to do it? Is it possible with Gulp? Should I migrate to something like webpack? And Yarn too?
I am working on a project and it's my first time I have tried gulp for organising my web application.
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const cssminify = require('gulp-cssmin');
// Copies html to dist folder
gulp.task('copyHtml', function(){
return gulp.src('./*.html')
.pipe(gulp.dest('dist'));
});
gulp.task('imgOpt', function(){
return gulp.src('./images/{**\/*.*,*.*}')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
gulp.task('minify', function(){
return gulp.src('./js/*.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('dist/js'));
});
gulp.task('copyAssets', function(){
return gulp.src('./assets/**/*.*')
.pipe(gulp.dest('dist/assets'));
});
gulp.task('copyJSON', function(){
return gulp.src(['!package.json', '*.json'])
.pipe(gulp.dest('dist'));
});
gulp.task('minifycss', function(){
return gulp.src('./css/*.css')
.pipe(cssminify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('copyFonts', function(){
return gulp.src('./fonts/**/*.*')
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('default',['copyHtml', 'imgOpt', 'minifycss', 'minify', 'copyAssets', 'copyJSON', 'copyFonts']);
gulp.task('watch', function(){
gulp.watch('./*.html',['copyHtml']);
gulp.watch(['!package.json', '*.json'],['copyJSON']);
gulp.watch('./fonts/**/*.*',['copyFonts']);
gulp.watch('./assets/**/*.*',['copyAssets']);
gulp.watch('./images/{**\/*.*,*.*}',['imgOpt']);
gulp.watch('./css/*.css',['minifycss']);
gulp.watch('./js/*.js',['minify']);
});
Above is my gulpfile.js. When I process this file by using gulp command in git that works without any error and the 'dist' folder is created but the the project transferred to the dist folder is all messed up and it looks like a lot of code is missing. I am unable to detect the problem.
All my javascript code is in ES5 as the ES6 standards were not acceptable and the there were errors encountered in the process.
Problem solved. My bad I was using an old plugin to minify css that was being depracated. Now everything is working fine.
Just to clear: gulp-minify-css and gulp-cssmin are older plugins of gulp that are not in use now. Instead for css minification gulp-clean-css is being used.
https://github.com/jakubpawlowicz/clean-css
i new with gulp and i have a problem that i can't know why.
I want to minify my js and css, with the code below, works, but only works if i call minify-js and minify-css into default.
Gulp watch not work and i don't know why.
If a delete the .min with watch running, he creates the .min file, but came empty. All problems i have found came with solutions that my code already have.
var css = [
'./css/estilo.css'
];
var js = [
'./js/app.js'
];
var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var watch = require('gulp-watch');
var cssmin = require("gulp-cssmin");
var stripCssComments = require('gulp-strip-css-comments');
gulp.task('minify-css', function(){
gulp.src(css)
.pipe(stripCssComments({all: true}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./css/min/'));
});
gulp.task('minify-js', function () {
gulp.src(js)
.pipe(jsmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./js/min/'));
});
gulp.task('default', function() {
gulp.start('watch');
});
gulp.task('watch', function() {
gulp.watch(js, ['minify-js']);
gulp.watch(css, ['minify-css']);
});
Change
gulp.task('default', function() {
gulp.start('watch');
});
to:
gulp.task('default', ['watch']);
This will set the default task's dependency as watch, running watch when default is called.
Also, instead of running gulp, you can run gulp watch to start watching your files. If you make a change to ./css/estilo.css or ./js/app.js, gulp will change it automatically.
Make sure safe write is turned off in your editor (if you use JetBrains this guide should work), and the /css and /min directories have been created.
Im new to using Gulp. I'm trying to concatenate my JavaScript files into a single file. Currently, I have the following:
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var input = {
js: './src/**/*.js'
};
var output = {
js: './dist/myJavaScript.min.js'
}
gulp.task('default', ['clean', 'bundle-js']);
gulp.task('clean', function(callback) {
});
gulp.task('bundle-js', function() {
gulp.src(input.js)
.pipe(concat(output.js))
.pipe(uglify())
;
});
When I run this, myJavaScript.min.js never gets generated. I ran gulp --verbose and I do not see any files being input. However, my directory structure looks like this:
/
/src
/childDirectory
file2.js
file1.js
gulpfile.js
package.json
Based on my understanding, the expression I used for input.js should get file1.js and file2.js. What am I doing wrong?
You should give
file name inside concat function, you should not give it as a path name
add return before including source.
add destination
try the following code,
gulp.task('bundle-js', function() {
return gulp.src(input.js)
.pipe(concat('myJavaScript.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});
You are missing your destination folder.
gulp-concat-link
.pipe(gulp.dest('folderPathHere'));