Project configuration of gulp

gulp

  1. gulp front-end automatic packaging tool needs to rely on a node environment
    • Package: combine the scattered things for you, compress, confuse and merge the code
  2. gulp version problem
    1. Two popular versions of gulp on the market
      • gulp@3.x.x is gulp 3, the previous version
      • gulp@4.x.x is gulp 4, the latest version
  3. gulp installation
    • Input instruction npm install --global gulp
    • mac uses sudo npm install --global gulp
  4. gulp detection
    • Enter the instruction gulp --version or gulp -v, and the version number indicates successful installation
  5. gulp uninstall
    • Input instruction npm uninstall --global gulp

Application of gulp

  1. Manually create a gulpfile.js file in the root directory of the project. It must be the name. In this file, write our packing rules for the project

  2. Writing the configuration file of gulpfile.js

    1. Borrow some gulp API s to help us pack

      • First install a gulp in the project as a development dependency
      • Import this third-party module
    2. Prepare one by one writing packing rules, because the packing rules of css/js/html are definitely different

    3. The way to execute various compressed code is to use various third-party modules

      1. Gulp cssmin is a third-party module specially used to compress css files, which needs to be downloaded and imported
      2. The gulp autoprefiner is designed to automatically prefix css with compatible code
      3. Gulp uglify is specially used to compress js files. You need to download and import it
    • Note: this third-party module does not understand es6 syntax

      • The third-party module of gulp Babel specifically converts es6 syntax to es5 syntax, but requires two other third-party packages
      • Respectively: @ babel/core and @ Babel / preset env
      • When downloading, you need to download three packages. To import, you only need to import gulp Babel
      1. Gulp htmlmin is specially used to compress html files, which needs to be downloaded and imported

      2. The del third-party module is specially used to delete directories

      3. The module that gulp web server uses to open the server

      4. Note: the third-party gulp module here is for packaging and compression, and does not need to go online, so it is recorded separately in the package.json file

      5. We install some dependencies that we don't need after going online, and use another instruction

      • NPM install -- instruction for save dev package name
      • Short name: NPM I-D package name
      • There is no difference between npm install package name download and npm install package name download. The only difference is that the location recorded in package.json is different. The devdendencies recorded in package.json file is different
      1. The configuration is as follows:
    // Import gulp module
    const gulp = require('gulp');
    /*
    gulp There are many ways
      1. src()   To find the files you want to pack
        Syntax: src('the address of the file you want to package ') returns a binary stream. You can continue to call methods
      2. pipe()   To help you
        Syntax: pipe('What you want to do ') returns a binary stream, and you can continue to call methods
      3. dest()   For writing files
        Syntax: gulp.dest('gulp.dest('./dist/css')') writes files to. / dist/css
      4. parallel()  Used to execute multiple tasks in parallel
        Syntax: gulp. Parallel (task 1, task 2,...)
        As soon as this return value is executed, several tasks you have prepared can be executed at the same time
      5. series()   Used to perform multiple tasks one by one
        Syntax: gulp. Series (task 1, task 2,...)
        As soon as this return value is executed, you can complete several tasks one by one
      6. watch()  It is used to monitor whether the file changes and make corresponding processing
        Syntax: gulp.watch('Listening file ', corresponding task)
    */ 
    
    // Import gulp cssmin module and compress css file
    const cssmin = require('gulp-cssmin');
    
    // Import gulp autoprefiner module for css to automatically prefix in browser
    const autoprefixer = require('gulp-autoprefixer');
    
    // Import the gulp uglify module to compress js code, but it will not compress es6 syntax, so you need to rely on another package
    // Gulp Babel, to convert es6 syntax into es5 syntax, this package needs two packages to support @ babel/core and @ Babel / preset env
    // Babel ({presets: ['@ Babel / env']}), which requires configuration parameters and can also be configured in package.json
    
    // Import gulp uglify to compress js files
    const uglify = require('gulp-uglify');
    
    // Import gulp Babel to convert es6 syntax. After the package is imported, @ babel/core and @ Babel / preset env will be imported automatically
    const babel = require('gulp-babel');
    
    // Import gulp htmlmin to compress html file. Configuration parameters are required for this package
    const htmlmin = require('gulp-htmlmin')
    
    // Import del module to delete directory
    const del = require('del')
    
    // Import gulp web server module to start a service
    const webserver = require('gulp-webserver')
    
    // Compress css file
    var cssHandler = function(){
      return gulp.src('./src/css/*.css')   // Find all the css files in the src directory
          .pipe(autoprefixer())   // css Code prefixes are compatible with different versions of browsers. Parameters can be written in package.json inside
          .pipe(cssmin())    // compress css Code
          .pipe(gulp.dest('./dist/css'))
    }
    
    // compress js file
    var jsHandler = function(){
      return gulp.src('./src/js/*.js')  // Find all js files
                 .pipe(babel({          // Transformation es6 Syntax, need to configure parameters
                  presets: ['@babel/env']
                 }))
                 .pipe(uglify())    // compress js Code
                 .pipe(gulp.dest('./dist/js'))  // Put the compressed code into ./dist/js Under this directory
    }
    
    // compress html file
    var htmlHandler = function(){
      return gulp.src('./src/html/*.html')
                 .pipe(htmlmin({  // This module needs configuration parameters to compress html files
                   removeAttributeQuotes: true,  // Remove double quotes above properties
                   removeComments: true,   // Remove comments
                   collapseBooleanAttributes: true,  // Property with Boolean value
                   collapseWhitespace: true, // Remove all spaces
                   minifyCSS: true,  // In the compressed page style Inside the label css style
                   minifyJS: true  // In the compressed page script Inside the label js Code
                 }))
                 .pipe(gulp.dest('./dist/html'))
    }
    
    // move images Pictures inside
    var imgHandler = function(){
      return gulp.src('./src/images/**')
                 .pipe(gulp.dest('./dist/images'))
    }
    
    // Delete directory
    var delHandler = function(){
      return del(['./dist'])
    }
    
    // Open a service
    var serverHandler = function(){
      return gulp.src('./dist')   // Get into dist Catalog
                 .pipe(webserver({
                   host: "localhost",
                   port: 3000,   // Port number
                   open: "./html/index.html",  // Default open page
                   livereload: true,  // Auto refresh page
                   proxies: [  // Proxy server can be configured
                     {
                       source: 'lzf', // Agent identifier
                       target: 'http://localhost:80/test.php'   // Real address to request
                     }
                   ]
                 }))
    } 
    
    // Automatic monitoring file
    var watchHandler = function(){
      gulp.watch('./src/css/*.css',cssHandler)
      gulp.watch('./src/js/*.js',jsHandler)
      gulp.watch('./src/html/*.html',htmlHandler)
      gulp.watch('./src/images/**',imgHandler)
    }
    
    
    module.exports.default = gulp.series(
      delHandler,
      gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler),
      serverHandler,
      watchHandler
    )
    

Key words: gulp anti war

‚Äč

Published 2 original articles, won praise 0, visited 37
Private letter follow

Tags: npm JSON Web Server Mac

Posted on Thu, 12 Mar 2020 01:11:46 -0700 by sdat1333