Gulp.js 探险

灰太狼 2023-01-04 13:10 177阅读 0赞

## 安装 ##

按照官网介绍进行安装（https://gulpjs.com/docs/en/getting-started/quick-start）。

`npm install --global gulp-cli`

## 打包多个 js 为 一个 ##

安装指定的文件顺序打包，这需要 gulp-concat 插件，安装：  
`npm install --save-dev gulp-concat`

> 命令说明：`–save-dev` 该指令参数 ，将该包到信息保存到项目配置文件 package.json 文件的开发环境依赖中。

测试

const {  src, dest } = require('gulp');
    const concat = require('gulp-concat');
    
    function defaultTask(cb) { 
        src(['a.js', 'b.js', 'c.js'])
            .pipe(concat('main.js'))
            .pipe(dest('./dist'));
    
        cb();
    }
    
    exports.default = defaultTask;

## 压缩 js ##

需要 gulp-uglify 插件，安装：

`npm install --save-dev gulp-uglify`

使用的时候加多一句：

const {  src, dest } = require('gulp');
    const concat = require('gulp-concat');
    const uglify = require('gulp-uglify');
    
    function defaultTask(cb) { 
        src(['a.js', 'b.js', 'c.js'])
            .pipe(concat('main.js'))
            .pipe(uglify())             // 压缩 js
            .pipe(dest('./dist'));
    
        cb();
    }
    
    exports.default = defaultTask;

## SourceMap ##

需要 gulp-sourcemaps 插件  
`npm i gulp-sourcemaps`

使用

const {  src, dest } = require('gulp');
    const {  watch, series } = require('gulp');
    const concat = require('gulp-concat');
    const uglify = require('gulp-uglify');
    const sourcemaps = require('gulp-sourcemaps');
    
    function js(cb) { 
        src(['a.js', 'b.js', 'c.js'])
            .pipe(sourcemaps.init())    // Source Map 
            .pipe(concat('main.js'))
            .pipe(uglify())             // 压缩 js
            .pipe(sourcemaps.write())   // Source Map 
            .pipe(dest('./dist'));
    
        cb();
    }
    
    exports.default = () => { 
        watch('*.js', series(js));
    };

## 监听目录 ##

Gulp 自带的 watch() 即可。

const {  src, dest } = require('gulp');
    const {  watch, series } = require('gulp');
    const concat = require('gulp-concat');
    const uglify = require('gulp-uglify');
    const sourcemaps = require('gulp-sourcemaps');
    
    function js(cb) { 
        src(['a.js', 'b.js', 'c.js'])
            .pipe(sourcemaps.init())    // Source Map 
            .pipe(concat('main.js'))
            .pipe(uglify())             // 压缩 js
            .pipe(sourcemaps.write())   // Source Map 
            .pipe(dest('./dist'));
    
        cb();
    }
    
    exports.default = () => { 
        watch('*.js', series(js));
    };

## 编译 TypeScript ##

npm 的 ts 包需要加上 `--save-dev` 的参数。  
`npm install typescript --save-dev`  
使用：

const ts = require('gulp-typescript');
    const tsProject = ts.createProject('tsconfig.json');
    
    exports.default = () => { 
        return tsProject.src()
            .pipe(tsProject())
            .js.pipe(dest("dist"));
    };

测试 ts 源码，可以正常编译为 js。但是 js 转 ts 总是不完美的，编译过程中会报错，默认一报错就会终止编译。于是我们忽略编译错误。

const ts = require('gulp-typescript');
    const tsProject = ts.createProject('tsconfig.json');
    
    exports.default = () => { 
        return tsProject.src()
            .pipe(tsProject())
            .on('error', () => {  /* Ignore compiler errors */})
            .js.pipe(dest("dist"));
    };

此时编译 ts 还不是守护进程的，我们利用 watch() 完成监视 ts 文件变化，随即进行编译。

其中 `/**` 的意思是包含下级所有的子目录。

## 启动 Node 程序 ##

npm install gulp-nodemon --save-dev

var gulp=require('gulp'),
    	nodemon=require('gulp-nodemon');
    gulp.task('start',function(){ 
    	nodemon({ 
    		script:'app.js'
    	});
    });

## Put all things together: 编译、压缩、打包一条龙 ##

关键是 series() 的应用。

const {  src, dest } = require('gulp');
    const {  watch, series } = require('gulp');
    const concat = require('gulp-concat');
    const uglify = require('gulp-uglify');
    const sourcemaps = require('gulp-sourcemaps');
    
    const ts = require('gulp-typescript');
    const tsProject = ts.createProject('tsconfig.json');
    
    // 编译 ts
    function compile() { 
        return tsProject.src()
            .pipe(tsProject())
            .on('error', () => {  /* Ignore compiler errors */ })
            .js.pipe(dest("dist"));
    }
    
    function js(cb) { 
        src(['a.js', 'b.js', 'c.js'])
            .pipe(sourcemaps.init())    // Source Map 
            .pipe(concat('foo.js'))
            // .pipe(uglify()) // 压缩 js
            .pipe(sourcemaps.write())   // Source Map 
            .pipe(dest('./dist'));
    
        cb();
    }
    
    exports.default = () => { 
        watch('src/**/*.ts', series(compile, js));
    };

以上例子在 node v14、Gulp v4.0.2、Gulp-CLI v2.3 下调试通过。