gulp 入门打包教程

gulp 入门打包教程

实现的功能说明

• 编译js文件es6、es7、es8
• js文件代码压缩
• 编译less文件
• gulp多任务合并执行

项目编译

项目目录结构如下：

1. 全局安装gulp（已安装可以跳过）

npm install -g gulp

# 测试是否安装成功
gulp --version
# CLI version: 2.3.0
# Local version: 4.0.2

2. 初始化package.json

新建gulp_build 并初始化package.json文件

mkdir gulp_build && npm init -y  

3. 安装编译依赖

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

4. package.json目录结构，如下：

{
  "name": "syncFilder",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp"                                       // 新增的
  },
  "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"
  }
}

5. 创建gulpfile.js 在项目根目录新建gulpfile.js文件

  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')    // 入口文件
      .pipe(less())
      .pipe(gulp.dest('dist/css')); //打包之后的文件
  }

  function js_build() {
    return gulp.src("test.js")
      .pipe(babel())                //语法编译
      .pipe(uglify())               //代码压缩
      .pipe(gulp.dest("dist"));
  }

  // 多任务合并执行
  gulp.task("default", gulp.series(css_build, js_build));

6. 创建.babelrc文件，内容如下：

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

7. 编译文件 执行gulp默认会执行gulpfile.js文件

# 根目录执行此命令
npx gulp 
# 或者
npm run build

补充部分：

以上的编译脚本不能编译import XX from XX，需要另外再安装 gulp-browserify，gulpfile.js修改如下

• 安装gulp-browserify

npm install gulp-browserify --save-dev

• gulpfile.js文件

  var gulp = require("gulp");
  var babel = require("gulp-babel");
  var browserify = require('gulp-browserify'); //新增代码
  var uglify = require('gulp-uglify');
  var less = require('gulp-less');


  function css_build() {
    return gulp.src('test.less')    // 入口文件
      .pipe(less())
      .pipe(gulp.dest('dist/css')); //打包之后的文件
  }

  function js_build() {
    return gulp.src("test.js")
      .pipe(babel())              //语法编译 
       .pipe(browserify({         //新增代码
            insertGlobals: true,
            debug: true
        }))
      .pipe(uglify())             //代码压缩
      .pipe(gulp.dest("dist"));
  }

  // 多任务合并执行
  gulp.task("default", gulp.series(css_build, js_build));