This is the 16th day of my participation in Gwen Challenge

preface

In the last gulp article, I explained how gulp handles HTML.

In this article, we will introduce how gulp handles JS.

Compression js

Gulp-uglify is a plugin for compressing JS.

The installation

npm i -D gulp-uglify
Copy the code

Create a new js folder in the SRC directory and create an index.js folder. Write the following test code in index.js.

function print() {
  console.log('test')
}

print()
Copy the code

Index.js is referenced in index.html.

<script src="./js/index.js"></script>
Copy the code

Configure it in gulpfile.js.

const uglify = require('gulp-uglify')

function js() {
  return src(['src/js/**/*.js'])
    .pipe(changed('dist/js/**/'))
    .pipe(uglify())
    .pipe(dest('dist/js'))}function watcher() {
  watch('src/**/*.html', series(html)).on('unlink'.function (path) {
    del('dist/**/' + Path.basename(path))
  })
  watch('src/js/**/*.js', series(js)).on('unlink'.function (path) {
    del('dist/js/**/' + Path.basename(path))
  })
}

exports.default = series(clean, html, js, devServer, watcher)
exports.build = series(clean, html, js)
Copy the code

Remember to also configure watch to listen for changes in the JS directory.

We open dist/js/index.js and see that the code in index.js is compressed.

Distinguish BETWEEN JS source code and JS libraries

We often introduce libraries such as JQ that do not require additional gulP processing, such as compressed JS. Most third-party libraries have compressed JS versions that are already complete and do not need to be processed by build tools.

Create a new lib directory in SRC. Lib will be used as the directory for storing the js third-party library, and paste the downloaded jq.js.

Set up the new task libJs in gulpfile.js and write to the listener and write to the execution task queue.

function libJs() {
  return src(['src/lib/**/*.js'])
    .pipe(changed('dist/lib/**/'))
    .pipe(dest('dist/lib'))}function watcher() {
  watch('src/**/*.html', series(html)).on('unlink'.function (path) {
    del('dist/**/' + Path.basename(path))
  })
  watch('src/js/**/*.js', series(js)).on('unlink'.function (path) {
    del('dist/js/**/' + Path.basename(path))
  })
  watch('src/lib/**/*.js', series(libJs)).on('unlink'.function (path) {
    del('dist/lib/**/' + Path.basename(path))
  })
}

exports.default = series(clean, html, libJs, js, devServer, watcher)
exports.build = series(clean, html, libJs, js)
Copy the code

By executing NPM run dev, we can see that dist also outputs the lib directory with jq.js.

Prevents process exit due to compilation errors

The Gulp-Plumber is a plug-in that prevents a compilation error from causing a process to exit, throwing an exception to the terminal if the program goes wrong, and preventing the process from exiting.

The installation

npm i -D gulp-plumber
Copy the code

Add pipe(Plumber ()) to HTML tasks, JS tasks, libJs tasks.

gulpfile.js

const plumber = require('gulp-plumber')

function html() {
  return src(['src/**/*.html'.'! src/include/**.html'])
    .pipe(changed('dist'))
    .pipe(plumber())
    .pipe(fileinclude({
      prefix: '@ @'.// Reference symbol
      basepath: './src/include'.// Reference the file path
    }))
    .pipe(htmlmin({
      removeComments: true.// Clear HTML comments
      collapseWhitespace: true.HTML / / compression
      collapseBooleanAttributes: true.// Omit Boolean values  ==> 
      removeEmptyAttributes: true. ==> 
      removeScriptTypeAttributes: true.// Delete 
      removeStyleLinkTypeAttributes: true.// Delete 
      minifyJS: true.// Compress the page JS
      minifyCSS: true // Compress the page CSS
    }))
    .pipe(dest('dist'))}function js() {
  return src(['src/js/**/*.js'])
    .pipe(changed('dist/js/**/'))
    .pipe(plumber())
    .pipe(uglify())
    .pipe(dest('dist/js'))}function libJs() {
  return src(['src/lib/**/*.js'])
    .pipe(changed('dist/lib/**/'))
    .pipe(plumber())
    .pipe(dest('dist/lib'))}Copy the code

Complete the project

On August 30, 2021, I reorganized the project and put it on Gitee. You can clone it and use it directly. The code submission record sequence is consistent with the sequence of my series of articles.

Gitee Library link: gitee.com/only1zhuo/g…

“The Use of GULP” series

• Use of GULP (1) : Start (juejin. Cn)
• Using gulp (2) : HTML (juejin. Cn)
• Using gulp (3) : processing js (juejin. Cn)
• Using gulp (4) : Handling CSS (juejin.cn)
• Use of gulp (5) : processing images (juejin. Cn)
• Use of Gulp (6) : Using Webpack stream modularization (juejin. Cn)
• Using gulp (7) : Using Babel to translate JS (juejin.cn)
• Use of GULP (8) : Separation environment (juejin. Cn)