Gulp uglify breaking angular application - javascript

When trying to use gulp-ugily with my angular application, it is breaking, even though I am running it through gulp-ngmin.
Here is the gulp file:
var gulp = require('gulp'),
concat = require('gulp-concat'),
ngmin = require('gulp-ngmin'),
uglify = require('gulp-uglify');
gulp.task('compress', function() {
gulp.src('client/js/source/*.js')
.pipe(concat('app.js'))
.pipe(ngmin())
.pipe(uglify())
.pipe(gulp.dest('client/js'));
});

It helps to disable the mangle option in uglify, for it's messing with all the injection stuff and naming.
.pipe(uglify({ mangle: false }))

Maybe answering this for future users, as it seems the post is old.
Use ng-annotate to fix AngularJS problems when uglifying. Install it as any other library:
npm install gulp-ng-annotate --save-dev
And then use this in your gulpfile.js:
var gulp = require('gulp')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var ngAnnotate = require('gulp-ng-annotate')
gulp.task('js', function () {
gulp.src(['src/**/module.js', 'src/**/*.js'])
.pipe(concat('app.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('.'))
})
Hope this helped!
Source: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

Related

Gulp and Three js not allowing import or require

I want to use Gulp in my future projects, but what it is more important to me is to add Three.js modular functionality, to the project, with normal plugins example uglify i dont have any problems, but when i run my gulp file in my js code theres always a error THREE is not defined, or if i type
var THREE = require('three');
it says require is not defined, the same if i add a import,
import * as THREE from "three";
import is not defined
hope i had expressed my problem correctly.
This is my Gulpfile.-
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var THREE = require('three');
gulp.task('build', () =>
gulp.src('app.js')
.pipe(bro({
transform: [
babelify.configure({ presets: ['es2015'] }),
[ 'uglifyify', { global: true } ]
]
})
.pipe(gulp.dest('dist')
)))
gulp.watch('*.js', ['build'])
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch', 'build']);
EDIT: Think i got it, the documentation of a site was not complete, and i didnt knew i had to install Browserify also with gulp-bro, that seems to be the same, anyway that fixed the require problem. (bringing other new ones) Thank you for everything, and hope this helps somebody.
EDIT2: Now i have found out that Rollup.js is a better solution, with Babel, theres Rollup npm s for that, good luck.
Thank you.

gulp watch not minify

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.

how to uglify javascript classes?

I'm writing basic javascript using the classes syntax and trying to uglify it with gulp, but getting this error:
events.js:72
throw er; // Unhandled 'error' event
I simply used the example code from mozilla's website:
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
And nothing special about my gulp file - works perfectly for any non-class js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'scripts', 'watch']);
At the time, I resolved this with a workaround by transpiling to ECMA 5 with Babel.
Later I discovered it was not a problem with my Node environment as the comments led me to believe, but in fact it was because the default uglify branch used in gulp-uglify doesn't support ECMA 6 yet.
The correct solution was to instead use the harmony branch of UglifyJS2 or to use the npm wrapper uglify-js-harmony.

gulp pipe(gulp.dest()) does not create any results

i am currently learning about gulp.js.
as i saw the tutorial and documentation of gulp.js, this code:
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
makes the uglified javascript file with create new directory named 'minjs'. of course, i installed gulp-uglity with --dev-save option. there is no error message on the console so i don't know what is the problem. i tried gulp with "sudo", but still not working.
so i went to the root directory and searched all filesystem but there is no file named 'minjs' so i guess it just not working. why this is happening? anyone knows this problem, it would be nice why this is happening.
whole source code:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('default', function() {
console.log('mifying scripts...');
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
I had the same problem; you have to return the task inside the function:
gulp.task('default', function() {
return gulp.src("js/*.js")
.pipe(uglify())
.pipe(gulp.dest('minjs'));
Also, minjs will not be a file, but a folder, where all your minified files are going to be saved.
Finally, if you want to minify only 1 file, you can specify it directly, the same with the location of the destination.
For example:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
gulp.task('browserify', function() {
return browserify('./src/client/app.js')
.bundle()
// Pass desired output filename to vinyl-source-stream
.pipe(source('main.js'))
// Start piping stream to tasks!
.pipe(gulp.dest('./public/'));
});
gulp.task('build', ['browserify'], function() {
return gulp.src("./public/main.js")
.pipe(uglify())
.pipe(gulp.dest('./public/'));
});
Hope it helps!
Finally I resolved the question like this:
It was a directory mistake so the gulp task hasn't matched any files; then it couldn't create the dest directory (because no files in output).
const paths = {
dest: {
lib: './lib',
esm: './esm',
dist: './dist',
},
styles: 'src/components/**/*.less',
scripts: ['src/components/**/*.{ts,tsx}', '!src/components/**/demo/*.{ts,tsx}'],
};
At first my scripts was ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}']
And that hasn't matched any files.

Gulp Watch not working

I'm using Gulp to dome some tasks on my SCSS and CSS. Now the problem is that when I run Gulp it's starting the watch but nothing is happening: no css is being created. I triple checked the folder structure and it's can.
This is my code:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
watch('resources/assets/sass/**/*.scss', function () {
gulp.start('sass');
});
});
Temporary Solution
After a long search with some people it's just PHPStorm that's not showing the updated file. The file has to be accessed first. It's like a sort of caching.
When I save the .scss file, and immediatly open it with notepad, or access a php file which uses the file, then it also updates in PHPStorm.
Try this one
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
gulp.watch('resources/assets/sass/**/*.scss', ['sass']);
});
I don't think you really need another plugin to complie your sass files, gulp.watch works just fine.
So basically what I am doing here is, I am just telling gulp to watch all the sass files in that folder and whenever there's a change, just run the task in the given array ['sass'].
The solution is a PHPStorm Setting
It seems that PHPStorm uses a form of file caching, that's why I didn't see the reflected changes. The solution can be found here!
How to prevent phpstorm to reload file without prompt when file on disk is changed?

Categories