gulp-uglify won't preserve files order - javascript

When I use gulp-uglify to minify the Javascript files the order gets messed up.
Lets say I have this task working as expected:
var gulp = require('gulp');
var rename = require('gulp-rename');
var gp_concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src([
'./public/bower_components/jquery/dist/jquery.min.js',
'./public/js/functions.js',
])
.pipe(gp_concat('combined.js'))
.pipe(gulp.dest(path.js + '/dist'))
});
Adding the uglify line to it changes the order of the jquery and functions files and places functions.js above jquery.
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var gp_concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src([
'./public/bower_components/jquery/dist/jquery.min.js',
'./public/js/functions.js',
])
.pipe(gp_concat('combined.js'))
.pipe(gulp.dest(path.js + '/dist'))
.pipe(uglify({
preserveComments: 'license'
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.js + '/dist'))
});
Any possible solution to it ?
Of course, functions.js is just a plane Javascript file with funtions in it and are not wrapped in an IIFE.

Karol Klepacki's answer is correct about using hoist_funs, but that's an option for the UglifyJS compressor. As such it needs to be provided within the compress option:
.pipe(uglify({
preserveComments: 'license',
compress: { hoist_funs: false }
}))

Please try disabling functions hoisting:
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var gp_concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src([
'./public/bower_components/jquery/dist/jquery.min.js',
'./public/js/functions.js',
])
.pipe(gp_concat('combined.js'))
.pipe(gulp.dest(path.js + '/dist'))
.pipe(uglify({
preserveComments: 'license',
hoist_funs: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.js + '/dist'))
});

Related

gulp sass not minifying

Having a task to process SCSS files (where some of them are just plain CSS) the end result is not minified .. This is part of my gulpfile.js:
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
var estilos = [
'app/scss/bootstrap.scss', /*a bunch of includes of other scss files*/
'node_modules/select2/dist/css/select2.min.css',
'node_modules/magnific-popup/dist/magnific-popup.css',
'app/scss/estilos.scss',
'app/scss/indexSlider.scss'
]
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(minifyCss())
.pipe(concatCss('final.min.css'))
.pipe(gulp.dest('public/css'))
});
I just started 2 days ago with gulp so my debugging skills are pretty minimum so far... what I'm I doing wrong for the final file not being minified?
you have a different src in your estilos, at first you have to compile them each to css, then merge. You can find the answer in this example https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/.
Hope is there help you)
Try moving the concat before the minifying:
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(concatCss('final.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest('public/css'))
});
that should fix it.
Also I would recommend to use gulp-clean-css because gulp-minify-css has being deprecated.

gulp tasks - concatenate files that created by another gulp task

I want to minify my js files in my /_dev folder then rename them and copy hem to minify-js folder, then concatenate minified files.
I use a gulpfile.js like this:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function() {
return gulp.src('_dev/js/libraries/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('minifiedJS'));
});
gulp.task('concatFiles',['minify-js'],function (){
return gulp.src(['minifiedJS/jquery.jplayer.min.js', 'minifiedJS/jplayer.playlist.min.js', 'minifiedJS/LinkToPlayer.min.js'])
.pipe(concat('final.js'))
.pipe(gulp.dest('_dist/js'));
});
when I run:
gulp concatFiles
minify-js task create the following file in minifiedJSfolder.
jquery.jplayer.min.js
jplayer.playlist.min.js
LinkToPlayer.min.js
but final.js won't create till I run gulp concatFiles command again.
how can i solve this problem?
You may try in one task as following
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function(){
return gulp.src('_dev/js/libraries/*.js')
.pipe(concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('final.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minify-js'], function(){});

Detect what file change with gulp

I have this gulpfile:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
I want to know what file trigger the watcher and his absolute path.
For example: if my project is placed in /myCode and I change the file src/main.js, I want to see /myCode/src/main.js inside minifyJS task. Is there a way to do it?
Thank you for your time.
You can do it by using gulp-ng-annotate and gulp-changed:
var gulp = require('gulp');
var changed = require('gulp-changed');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'src/';
//Function to get the path from the file name
function createPath(file) {
var stringArray = file.split('/');
var path = '';
var name = stringArray[1].split('.');
stringArray = name[0].split(/(?=[A-Z])/);
if (stringArray.length>1) {stringArray.pop()};
return {folder: stringArray[0], name: name[0]}
}
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(rename(function (path) {
var createdPath = createPath(path);
path.dirname = createdPath.folder;
path.basename: createdPath.name,
path.prefix: "",
path.suffix: "",
path.extname: ".min.js"
}))
.pipe(gulp.dest(DEST));
});
Result:
Use gulp-changed npm package.
$ npm install --save-dev gulp-changed
Try the below in gulp file, (I haven't tried)
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(changed('min'))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
see the documentation of this package https://www.npmjs.com/package/gulp-changed
Based on your comment to Julien's answer this should be fairly close to what you want, or at least get you going in the right direction:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cache = require('gulp-cached'),
rename = require('gulp-rename'),
path = require('path');
function fileName(file) {
return file.dirname + path.sep + file.basename + file.extname;
}
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(cache('minifyJS'))
.pipe(rename(function(file) {
var nameOfChangedFile = fileName(file);
if (nameOfChangedFile == './main.js') {
file.basename = 'main.min'
}
if (nameOfChangedFile == './userView.js') {
file.basename = 'user/userView.min'
}
console.log(nameOfChangedFile + ' -> ' + fileName(file));
}))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
This uses gulp-cached to keep an in-memory cache of all the files in your src/ folder that have passed through the stream. Only files that have changed since the last invocation of minifyJS are passed down to the gulp-rename plugin.
The gulp-rename plugin itself is then used to alter the destination path of the changed files.
Note: the cache is empty on first run, since no files have passed through the gulp-cached plugin yet. This means that the first time you change a file all files in src/ will be written to the destination folder. On subsequent changes only the changed files will be written.

How can you delete a folder and its contents after all tasks have been run in Gulp?

Here is what I have now, but it is not working. The css folder is not being cleaned out, but no errors are being thrown.
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var del = require('del');
gulp.task('default', ['compile-sass', 'process-css', 'clean-css']);
gulp.task('compile-sass', function () {
gulp.src('resources/assets/sass/main.scss')
// Compile Sass
.pipe(sass({
includePaths: ['resources/assets/bower/foundation/scss/foundation/components/']
}))
// Autoprefix CSS
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// Move to Temp Destination
.pipe(gulp.dest('resources/assets/css'));
});
gulp.task('process-css', ['compile-sass'], function () {
gulp.src(['resources/assets/css/main.css', 'bower/slick/slick/slick.css'])
// Concat CSS Files
.pipe(concat('all.min.css'))
// Minify CSS
.pipe(minifyCSS())
// Move to Final Destination
.pipe(gulp.dest('public/assets/css/'));
});
gulp.task('clean-css', ['process-css'], function () {
// Delete Temp Files & Folders
del(['resources/assets/css/']);
});
I figured it out. I had to return the stream's from the prior tasks to confirm they were completed.
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var del = require('del');
gulp.task('default', ['compile-sass', 'process-css', 'clean-css']);
gulp.task('compile-sass', function () {
var stream = gulp.src('resources/assets/sass/main.scss')
// Compile Sass
.pipe(sass({
includePaths: ['resources/assets/bower/foundation/scss/foundation/components/']
}))
// Autoprefix CSS
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// Move to Temp Destination
.pipe(gulp.dest('resources/assets/css'));
return stream;
});
gulp.task('process-css', ['compile-sass'], function () {
var stream = gulp.src(['resources/assets/css/main.css', 'bower/slick/slick/slick.css'])
// Concat CSS Files
.pipe(concat('all.min.css'))
// Minify CSS
.pipe(minifyCSS())
// Move to Final Destination
.pipe(gulp.dest('public/assets/css/'));
return stream;
});
gulp.task('clean-css', ['process-css'], function () {
// Delete Temp Files & Folders
del(['resources/assets/css/']);
});

How to use the new Browserify API?

I am currently working on a ReactJS project, so I decided to setup a workflow using Gulp to manage the uglification, minification, JSX transformation and so on.
The problem is that the Browserify API is constantly changing (the documentation is not being updated quite often) we can no longer use options inside bundle()
As it is stated by the log error message : "Move all option arguments to the Browserify() constructor"
But not all the options I am using are available, here is my code for now :
var gulp = require('gulp');
var gutil = require('gulp-util');
var streamify = require('gulp-streamify');
var source = require('vinyl-source-stream');
var del = require('del');
prod = gutil.env.prod;
gulp.task('cleanjs', function(cb) {
del(['build/js'], cb);
});
gulp.task('cleancss', function(cb) {
del(['build/css'], cb);
});
gulp.task('sass', ['cleancss'], function() {
var sass = require('gulp-sass');
var concat = require('gulp-concat');
gulp.src(['./src/**/.{css, scss}'])
.pipe(sass())
.pipe(concat('livemap.min.css'))
.pipe(gulp.dest('./build/css'));
});
gulp.task('watch', function() {
var watchify = require('watchify');
var reactify = require('reactify');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
var bundler = watchify(browserify('./src/main.js', {
cache: {},
packageCache: {},
fullPaths: true,
transform: ['reactify'],
debug: true,
}));
function rebundle() {
var t = Date.now();
gutil.log('Starting Watchify rebundle');
return bundler.bundle()
.pipe(source('bundle.js'))
.pipe(prod ? streamify(uglify()) : gutil.noop())
.pipe(gulp.dest('./build/js'))
.on('end', function () {
gutil.log('Finished bundling after:', gutil.colors.magenta(Date.now() - t + ' ms'));
});
}
bundler.on('update', rebundle);
gulp.watch('./src/**/*.{css, scss', ['sass']);
return rebundle();
});
gulp.task('default', ['watch']);
Any help would be very welcome !
Here's how i do it: https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js
var options = watchify.args;
options.debug = true;
var bundler = browserify(options);
bundler.add("./public/scripts/app.js");
bundler.transform("reactify");
var watcher = watchify(bundler);
.
.
.

Categories