Gulp automatic packaging tool

Gulp use

  1. Create the project according to the gulp directory structure
- Project - SRC + pages// Store HTML pages
        + js // Store the js file
        + css // Store the CSS file
        + sass // Store.scss files
        + lib // Store third-party packages
        + static // Store static resources, images, etc
Copy the code
  1. Initialize the projectnpm init
  2. Install gulp globally, only oncenpm install gulp -g
  3. Install gulp in your project, using the APInpm i gulp

gulpAPI

  • task()
//task defines a task named name, which can be used by gulp name
const gulp = require('gulp')
gulp.task('name'.function(){
    return gulp.src().... // The task corresponds to the code
})
Copy the code
  • src()
// Convert the path in SRC parentheses to a stream of data objects
gulp.task('name'.function(){
    return gulp.src('path')})Copy the code
  • dest()
// Convert the stream of data objects to a file system. The path is the one in parentheses. No corresponding folder will be created
gulp.task('name'.function(){
    return gulp.src('path')
                .pipe(gulp.dest('Output path'))})Copy the code
  • pipe()
SRC processed data can be likened to flows that flow between pipes
gulp.task('name'.function(){
    return gulp.src('Output path')
               .pipe(gulp.dest('Output path'))})Copy the code
  • series()
// Aggregate tasks so that they are executed in sequence
gulp.task('name',gulp.series('task1'.'task2'.'task3'))
Copy the code
  • parallel()
// Aggregate tasks to execute concurrently
gulp.task('name',gulp.parallel('task1'.'task2'.'task3'))
Copy the code

Gulp packaging

The packaging is done in the gulpfile.js file, which is located in the project directory

  • Packing CSS files
// Download third-party packages. These packages are used during development and need to be added with -d
npm install gulp-cssmin -D 

// Import third-party packages
const cssmin = require('gulp-cssmin')

// Operate, use
gulp.task('css'.function(){
    return gulp.src('./src/css/**') // Convert a file to a stream of data objects
               .pipe(cssmin()) // Compress the CSS file
               .pipe(dest('./dist/css')) // The data object stream is converted to the specified path file
})
Copy the code
  • Package sASS files
// Download third-party packages
npm install gulp-sass -D
npm install sass
// Import third-party packages
const sass = require('gulp-sass') (require('sass'))

// Operate, use
gulp.task('sass'.function(){
    return gulp.src('./src/sass/**')
               .pipe(sass()) // Process sass, convert sass to CSS file
               .pipe(cssmin()) // Compress the CSS file
               .pipe(dest('./dist/css'))})Copy the code
  • Packaging HTML files
// Download third-party packages
npm install gulp-htmlmin -D 
// Import third-party packages
const htmlmin = require('gulp-htmlmin')

// Operate, use
gulp.task('html'.function(){
    return gulp.src('./src/pages/**')
               .pipe(htmlmin({
                   removeEmptyAttributes:true.// Remove all empty attributes
                   collapseWhitespace: true HTML / / compression
               }))
               .pipe(gulp.dest('./dist/pages'))})Copy the code
  • Package JS files
// Download third-party packages
npm i gulp-uglify -D Js / / compression
// Es6 to ES5 dependencies
npm i gulp-babel@7.01. -D
npm i babel-core -D
npm i babel-preset-es2015
// Import third-party packages
const babel = require('gulp-babel') / / compression
const uglify = require('gulp-uglify') // Convert to ES5

// Operate, use
gulp.task('js'.function(){
    return gulp.src('./src/js/**')
               .pipe(babel({
                   presets: ['ese2015']
               }))
               .pipe(uglify())
               .pipe(gulp.dest('./dist/js'))})Copy the code
  • Package static and lib files
// Static and lib are both stored information that needs to be copied without packaging
// Operate, use
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/'))})Copy the code
  • Clear the previously packed files
// Download third-party packages
npm i gulp-clean -D
// Import third-party packages
const clean = require('gulp-clean')

// Operate, use
gulp.task('clean'.function () { 
    return gulp.src('./dist/', { allowEmpty: true }) // Allow the file to be empty
               .pipe(clean()) 
})
Copy the code
  • Automatically open the browser to run the specified file
// Download third-party packages
npm i gulp-webserver -D
// Import third-party packages
const webserver = require('gulp-webserver')

// Operate, use
gulp.task('webserver'.function () { 
    return gulp.src('./dist/') 
               .pipe(webserver({ 
                   host: 'localhost'./ / address
                   port: 3000./ / the port number
                   livereload: true.// Automatically refresh
                   open: './pages/index.html' // The page is opened by default}})))Copy the code
  • Dynamically listening for updates
// Create a task, automatically recompile, do not need to rely on, directly monitor file changes task
// Operate, use
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
  • Example Change the default task default

You can run default tasks using gulp


exports.default = gulp.series('clean',
    gulp.parallel('css'.'sass'.'js'.'html'.'static'.'lib'), 
    'webserver'.'watch')
Copy the code
  • Expansion operators are not recognized in gulp.And complains