gulp 简单使用（打包js文件到目标文件，重命名，统一目标文件，混淆文件）

首先贴出官网：gulp

类似webpack的打包软件，对js文件和css文件进行打包

首先创建一个gulp项目，具体的可以看看gulp官网的入门指南，构建完项目之后，创建一个文件夹： gulpfile.js文件夹

一：打包js文件

在里面创建index.js文件，主要是gulp的入口文件，然后创建一个js文件夹，创建一些源文件，用于打包测试

gulpfile.js文件夹下的文件：backStream.js

const {src,dest,EventEmittter,task} = require("gulp");
const rename = require("gulp-rename");
const concat = require("gulp-concat");
const {exec} = require("child_process");
// 混淆操作
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const backStream = function() {

};
// 返回流
backStream.prototype.streamTask = function() {
    // src和dest之间可以对文件进行操作 大部分是用gulp插件进行完成
    // 源文件-->输入到输入输出管道流-->输出到目标文件 --> 混淆设置 --> 重命名文件 ---> 输出到目标文件 
    return src('js/*.js').pipe(dest('output/js')).pipe(uglify()).pipe(rename({extname: '.min.js'})).pipe(dest('output/js'));
}
// 返回promise
backStream.prototype.promiseTask = function() {
    return new Promise((resolve,reject)=> {
    setTimeout(() => {
        console.log("three seconds is end");
        resolve();
    },3000);
})
}
// 返回事件派发
backStream.prototype.eventEmitterTask = function() {
    const emitter = new EventEmittter();
    setTimeout(() => emitter.emit("finish"),250);
    return emitter;
} 
// 返回子线程
backStream.prototype.childProcessTask = function() {
    return exec("date");
}

module.exports = backStream;

 然后index.js文件：

const {series,parallel,src,dest,task} = require("gulp");
const backStream = require("./backStream");
function clean(cb) {
    cb();
}
function dev(cb) {
    console.log("dev");
    cb();

}
function release(cb) {
    console.log("release");
    cb();
}
function cut(cb) {
    cb();
}
function jsBind(cb) {
    console.log("js bind");
    cb();
}
function promiseT() {
    return new Promise((resolve,reject)=> {
        setTimeout(() => {
            console.log("three seconds is end");
            resolve();
        },3000);
    })
}

function cssBind(cb) {
    console.log("css bind");
    cb();
}
function publish(cb) {
    cb();
}
if(process.env.NODE_ENV === "production") {
    exports.release = release;
} else {
    exports.dev = dev;
}

// 利用exprots 导出的任务为公开任务
exports.cut = cut;
console.log("backStream is ",backStream);
let backInstance = new backStream();
// task(['jscompress']);
// 私有任务列表 串行里面包括并行
exports.default = series(clean,cut,parallel(jsBind,cssBind),publish,promiseT,backInstance.streamTask);

打包之前源文件不能用es6语法，比如let,const等等。 否则会报错。

 如果配置没有什么问题的话，然后在根目录运行gulp命令就会正确的进行打包

 

 二：打包ts文件（包括ts源文件，js文件，xx.min.js）

1:创建src文件夹：其中包括main.ts测试文件

2：创建tsconfig.json:

{
    "files": [
        "js/src/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

 打包多个文件可以在files数组中加入多个文件就可以了。

 3：npm install gulp-typescript --save-dev

4:在gulpfile.js文件中加入：

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


function tsTest() {
    return tsProject.src().pipe(dest('output/ts')).pipe(tsProject()).js.pipe(dest('output/ts')).pipe(uglify()).pipe(rename({extname: '.min.js'})).pipe(dest('output/ts'));
}

 可以看到正确打包完毕