Gulp start packaging tutorial

Gulp start packaging tutorial

The function description of the implementation

• compilejsfileEs6, ES7, es8
• jsFile code compression
• compilelessfile
• gulpMulti-task merge execution

Compile the project

The project directory structure is as follows:

1. Global installationgulp(It can be skipped if installed)

npm install -g gulp

#Check whether the installation is successful
gulp --version
# CLI version: 2.3.0
#The Local version: 4.0.2
Copy the code

2. Initialize thepackage.json

Create gulp_build and initialize the package.json file

mkdir gulp_build && npm init -y  
Copy the code

3. Install build dependency

npm install @babel/cli @babel/core @babel/preset-env gulp gulp-babel gulp-less gulp-uglify -save-dev
Copy the code

4. package.jsonThe directory structure is as follows:

{" name ":" syncFilder ", "version" : "1.0.0", "description" : ""," main ":" test. Js ", "scripts" : {" test ", "echo \" Error: No test specified \ "&& exit 1", "build" : "gulp" / / new}, "keywords" : [], "author" : ""," license ": "ISC", "devDependencies" : {" @ Babel/cli ":" ^ 7.12.1 ", "@ Babel/core" : "^ 7.12.3", "@ Babel/preset - env" : "^ 7.12.1", "gulp" : "^ 4.0.2 gulp -", "Babel" : "^ 8.0.0", "gulp - less" : "^ 4.0.1", "gulp - uglify" : "^ 3.0.2"}}Copy the code

5. creategulpfile.js

Create a new gulpfile.js file in the project root directory

var gulp = require("gulp");
var babel = require("gulp-babel");
var uglify = require('gulp-uglify')
var less = require('gulp-less')

function css_build() {
 return gulp.src('test.less')    // Import file
   .pipe(less())
   .pipe(gulp.dest('dist/css')); // The packaged file
}

function js_build() {
 return gulp.src("test.js")
   .pipe(babel())                // syntax compilation
   .pipe(uglify())               // Code compression
   .pipe(gulp.dest("dist"));
}

// Multiple tasks merge execution
gulp.task("default", gulp.series(css_build, js_build));
Copy the code

6. create.babelrcFile, as follows:

{
   "presets": ["@babel/preset-env"]
}
Copy the code

7. Compile the file

performgulpIt’s executed by defaultgulpfile.jsfile

#Root directory run this command
gulp 
#or
npm run build
Copy the code

Supplementary parts:

The above compilation script cannot compile import XX from XX, so you need to install gulp-browserify again

• The installationgulp-browserify

npm install gulp-browserify --save-dev
Copy the code

• gulpfile.jsfile

  var gulp = require("gulp");
  var babel = require("gulp-babel");
  var browserify = require('gulp-browserify'); // Add new code
  var uglify = require('gulp-uglify');
  var less = require('gulp-less');


  function css_build() {
    return gulp.src('test.less')    // Import file
      .pipe(less())
      .pipe(gulp.dest('dist/css')); // The packaged file
  }

  function js_build() {
    return gulp.src("test.js")
      .pipe(babel())              // syntax compilation
       .pipe(browserify({         // Add new code
            insertGlobals: true.debug: true
        }))
      .pipe(uglify())             // Code compression
      .pipe(gulp.dest("dist"));
  }

  // Multiple tasks merge execution
  gulp.task("default", gulp.series(css_build, js_build));
Copy the code