Introduction to gulp:
Gulp is a tool for building code in front-end development and a powerful tool for building automation projects. It can not only optimize website resources, but also many repetitive tasks can be automatically completed with 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. It can automatically complete the testing, checking, merging, compression, formatting, browser automatic refresh, deployment file generation of files such as javascript/coffee/sass/less/html/image/css, and listen to repeat the specified steps after the file is changed. In terms of implementation, she borrowed the pipe idea of the Unix operating system. The output of the previous level directly became the input of the next level, making the operation very simple. Through this article, we will learn how to use Gulp to change the development process, making development faster and more efficient.
gulp is very similar to grunt, but compared with frequent IO operations of grunt, gulp's streaming operations can complete the construction work faster and more conveniently.
When I was learning gulp today, I used gulp-uglify to compress the js module. I encountered a problem - when using gulp.watch to listen to changes in js files, I encountered repeated compression problems.
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 executing the gulp uglify command:
The corresponding *.min.js is also generated:
But when I open a kong.js file and save it again, the following situation occurs:
Save it once and then compress it again. There will be many js compressed files such as *.min.min...js, and only the first kong.min.js value will change according to kong.js. Later, I checked the following document and someone wrote about gulp-uglify and found that it can be used! To filter out min.js, prevent it from compressing, change the 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 editor’s introduction to gulp-uglify and gulp.watch() when used in conjunction with gulp.watch(). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!