Gulp.js 探险

安装

按照官网介绍进行安装(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 文件变化,随即进行编译。

const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

function compile() {
    return tsProject.src()
        .pipe(tsProject())
        .on('error', () => { /* Ignore compiler errors */ })
        .js.pipe(dest("dist"));
}

exports.default = () => {
    watch('src/**/*.ts', series(compile));
};

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

启动 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 下调试通过。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页