GUlP automated build packaging tool

Gulp is an automated package build tool for project development that runs on a Node environmentCopy the code

Install GULP

Gulp $NPM install --global gulp $NPM install --global gulp $NPM install --global gulp $gulp --version $gulp --version $gulp --versionCopy the code

Using GULP

1. Directory structure

-gulp_demo -src source code + CSS CSS +js js +pages HTML +sass sass +lib third-party folder +static resources folderCopy the code

2. Perform an NPM initialization in the project folder
```
      npm init -y
Copy the code
```

Project GULP configuration

Install gulp

We've already installed gulP global dependencies before but each project has gulP installed once project dependencies because each project has a different package build rule, $AD gulp_demo $NPM install -d gulp $AD gulp_demo $NPM install -d gulpCopy the code

Create a new gulpfile.js file in the project directory when the project is packaged build configuration
Gulp builds according to the rules in the gulpfile.js file
Next, configure it in the gulpfile.js file to make our package build work

GULP API (Usage)

task()

Each gulp task is an asynchronous JavaScript function // Create a task named CSS gulp.task(' CSS ',function(){// the code that executes the task})Copy the code

src()

Create a stream to read data objects from a fileCopy the code

dest()

Create a stream for writing data objects to the file systemCopy the code

pipe
```
The pipeCopy the code
```

series()

Gulp.series ('js',' CSS ') gulp.task('test',gulp.serise('copy','js'))Copy the code

paralle()

Paralle gulp.task('test', paralle gulp.paralle('copy','js'))Copy the code

watch()

Listen on the file system and run tasks when changes occurCopy the code

Packaging operation

Packing CSS files

Depends on NPM I-D gulp-CSSMin/** * Create a CSS construction task */
        gulp.task('css'.function () {
          return gulp.src('./src/css/**')
            .pipe(cssmin())
            .pipe(gulp.dest('./dist/css/'))})Copy the code

Package SASS files

Depends on NPM I -d gulp-sass NPM I sass/** * sass task * 1. Sass -> CSS * 2. Compress CSS * 3. dist */
    gulp.task('sass'.function () {
      return gulp.src('./src/sass/**')
        .pipe(sass()) //sass->css
        .pipe(cssmin()) / / compress CSS
        .pipe(gulp.dest('./dist/css/'))})Copy the code

Package JS files

Rely on NPM i-d gulp-uglify to compress and compile ES6 syntax (ES6 to ES5 e.g. arrow function to convertfunction) / * * *js* 1.jsHigh version syntax -> low version, compatible with user browsers *bable
     *   2. js* 3.dist/js* /gulp.task('js'.function () {
      return gulp.src('./src/js/**')
        .pipe(babel({
          presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))})
Copy the code

Packaging HTML files

NPM -d gulp-htmlmin is required/** * HTML task */
            gulp.task('html'.function () {
              return gulp.src('./src/pages/**')
                .pipe(htmlmin({
                  removeEmptyAttributes: true.collapseWhitespace: true
                }))
                .pipe(gulp.dest('./dist/pages/'))})Copy the code

Package LIB and STATIC files

These are third-party files and images and things like that that don't need to be compressed and just go down to the dist folderCopy the code

– Execute tasks in batches in sequence

Serise executes exports in sequence. Default exposes a default task and runs the default task directly under the directory. Run: gulp with the gulp command exports.default = gulp.serise(' CSS ','js',' HTML ','lib','static'Copy the code

Batch tasks at the same time

Paralle exports.default exposes a default task and can run the default task directly under the directory. Run: gulp with the gulp command exports.default = gulp.paralle(' CSS ','js',' HTML ','lib','static'Copy the code

Clear folder DIST

Why clear it up? So it's like I've already packed and I've changed a file name or something, so I'm going to have to repack, but when I'm repacking, I'm going to have to repack a file home so I'm going to have to clean it up and then I'm going to have to rely on NPM i-d gulp-cleanCopy the code

     /** * clean */
    gulp.task('clean'.function () {
      return gulp.src('./dist/', {
          allowEmpty: true
        })
        .pipe(clean())
    })
Copy the code

Clear the configuration to the default task

Series executes tasks sequentially and PARALLEL executes tasks simultaneouslyCopy the code

    exports.default = gulp.series('clean', gulp.parallel('css'.'sass'.'js'.'html'.'lib'.'static'))
Copy the code

Automatically open the browser

Depends on NPM i-d gulp-webServerCopy the code

     /** * webserver */
    gulp.task('webserver'.function () {
      return gulp.src('./dist/')
        .pipe(webserver({
          host: 'localhost'.port: 3000.livereload: true.open: './pages/index.html'}})))Copy the code

Modify content west east refresh

Create a task that will automatically recompile for us when the contents of the folder change without any dependencies, we just need to configure a task to monitor file changesCopy the code

     /** * watch */
    gulp.task('watch'.function () {
      gulp.watch('./src/css/**', gulp.parallel('css'))
      gulp.watch('./src/sass/**', gulp.parallel('sass'))
      gulp.watch('./src/js/**', gulp.parallel('js'))
      gulp.watch('./src/pages/**', gulp.parallel('html'))
      gulp.watch('./src/lib/**', gulp.parallel('lib'))
      gulp.watch('./src/static/**', gulp.parallel('static'))})Copy the code

Installation package -d parameters

NPM install -s sass Online environment dependency NPM install -d sass Dev environment dependencyCopy the code

GULP completes the configuration file

All the dependency packages you need
- gulp
- gulp-cssmin
- gulp-sass
- gulp-uglify
- [email protected]
- babel-core
- babel-preset-es2015
- gulp-htmlmin
- gulp-clean
- gulp-webserver
A sample

        

    /** Gulp project development steps: 1. Create gulp project according to gulp directory structure 2. NPM init 3. Install gulp locally (if not globally) 4. Gulp configuration file gulpfile.js 5. Write task 5.1 Compress the CSS and copy it to gulp-cssmin package */ in the dist directory
    const gulp = require('gulp') / / into the gulp
    const cssmin = require('gulp-cssmin')

    // const sass = require('sass')
    // const gulpSass = require('gulp-sass')
    // const sassObj = gulpSass(sass)
    const sass = require('gulp-sass') (require('sass'))
    const babel = require('gulp-babel')
    const uglify = require('gulp-uglify')
    const htmlmin = require('gulp-htmlmin')
    const clean = require('gulp-clean')
    const webserver = require('gulp-webserver')
    /** * Create a CSS construction task */
    gulp.task('css'.function () {
      return gulp.src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))})/** * sass task * 1. Sass -> CSS * 2. Compress CSS * 3. dist */
    gulp.task('sass'.function () {
      return gulp.src('./src/sass/**')
        .pipe(sass()) //sass->css
        .pipe(cssmin()) / / compress CSS
        .pipe(gulp.dest('./dist/css/'))})/** * JS task * 1.js high version syntax -> low version, compatible with user browser * bable * 2.js compression * 3. dist/js */
    gulp.task('js'.function () {
      return gulp.src('./src/js/**')
        .pipe(babel({
          presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))})/** * HTML task */
    gulp.task('html'.function () {
      return gulp.src('./src/pages/**')
        .pipe(htmlmin({
          removeEmptyAttributes: true.collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist/pages/'))})/** * static */
    gulp.task('static'.function () {
      return gulp.src('./src/static/**')
        .pipe(gulp.dest('./dist/static/'))
    })

    gulp.task('lib'.function () {
      return gulp.src('./src/lib/**')
        .pipe(gulp.dest('./dist/lib/'))})// gulp.task('series', gulp.series('css','sass','js','html','static','lib'))
    gulp.task('parallel', gulp.parallel('css'.'sass'.'js'.'html'.'static'.'lib'))


    /** * clean */
    gulp.task('clean'.function () {
      return gulp.src('./dist/', {
          allowEmpty: true
        })
        .pipe(clean())
    })

    /** * webserver */
    gulp.task('webserver'.function () {
      return gulp.src('./dist/')
        .pipe(webserver({
          host: 'localhost'.port: 3000.livereload: true.open: './pages/index.html'}})))/** * watch */
    gulp.task('watch'.function () {
      gulp.watch('./src/css/**', gulp.parallel('css'))
      gulp.watch('./src/sass/**', gulp.parallel('sass'))
      gulp.watch('./src/js/**', gulp.parallel('js'))
      gulp.watch('./src/pages/**', gulp.parallel('html'))
      gulp.watch('./src/lib/**', gulp.parallel('lib'))
      gulp.watch('./src/static/**', gulp.parallel('static'))})exports.default = gulp.series('clean', gulp.parallel('css'.'sass'.'js'.'html'.'static'.'lib'), 'webserver'.'watch')

Copy the code

GUlP automated build packaging tool

GUlP automated build packaging tool

Install GULP

Using GULP

Project GULP configuration

GULP API (Usage)

Packaging operation

GULP completes the configuration file

Related Posts

9. Palindromes

Fall 2021 front end of the latest interview questions, JS foundation to JS high order calmly answer

Vue3 0 to 1 Component Development – Build a component library