When gulp-uglify and gulp. watch () are used together, an error is reported (duplicate compression problem), and gulpuglify

When gulp-uglify and gulp. watch () are used together, an error is reported (duplicate compression problem), and gulpuglify

Introduction to gulp:

Gulp is a tool for building code during front-end development and a powerful tool for building automated projects. It can not only optimize website resources, in addition, many repeated tasks can be automatically completed using the correct tools during the development process. With her, we can not only write code happily, but also greatly improve our work efficiency.

Gulp is an automatic task runner based on Nodejs, she can automatically test, check, merge, compress, format, automatically refresh the browser, and generate deployment files for javascript/coffee/sass/less/html/image/css files, the listener repeat the specified steps after the file is modified. In terms of implementation, she borrowed the pipe idea of the Unix operating system. The output of the previous level is directly converted into the input of the next level, which makes the operation very simple. Through this article, we will learn how to use Gulp to change the development process so that development is faster and more efficient.

Gulp and grunt are very similar, but compared with grunt's frequent IO operations, gulp's stream operations can complete the build work more quickly and conveniently.

When I learned about gulp today, I used the gulp-uglify compression js module. I encountered a problem-repeated compression problem when I used gulp. watch to listen for js file changes.

The directory structure is as follows:

The gulpfile. js code is as follows:

var gulp = require('gulp');var uglify = require('gulp-uglify'); var rename = require('gulp-rename');gulp.task('uglify', function() {gulp.src('./src/js/*.js').pipe(rename({suffix:'.min'})).pipe(uglify()).pipe(gulp.dest('./src/js'));});var watcher = gulp.watch('./src/js/*.js', ['uglify']);watcher.on('change', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');});

After the gulp uglify command is executed:

The corresponding *. min. js is also generated:

However, when I open a kong. js file and save it again, the following occurs:

Once saved, it will be compressed again, and there will be many *. min. min... js and other compressed files, and only the first kong. min. the js value will follow kong. js changed and later I checked the document. Someone else wrote the content about gulp-uglify and found that it could be used! To screen out min. js and prevent it from being compressed. The changed code:

var gulp = require('gulp');var uglify = require('gulp-uglify'); var rename = require('gulp-rename');gulp.task('uglify', function() {gulp.src(['./src/js/*.js','!./src/js/*.min.js']).pipe(rename({suffix:'.min'})).pipe(uglify()).pipe(gulp.dest('./src/js'));});var watcher = gulp.watch('./src/js/*.js', ['uglify']);watcher.on('change', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');});

The above is the introduction of gulp-uglify and gulp. watch () used in combination with an error (repeated compression problem), I hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!