gulp-实现npm模块编译构建工具
我们在使用node_modules文件下的npm包时是否思考过怎么去实现自己的一个npm工具包，我分享下使用gulp实现一个npm包的构建工具，会把src下的（源码）组件库（简易）目录下输出到public目录（上传到npm官网的目录),以及在开发过程中如何实时输出到对应目录进行调试
环境版本
node: v12.16.1
gulp: 4.0.2
说在前面
不是介绍gulp应该如何使用，了解gulp如何使用的请前往gulp中文官网,如果有低版本要升级到4.X版本遇到问题的可以私信我哟
构建npm包
build 构建
gulpfile.babel.js添加build task任务，主要是把我们的源目录相关资源打包到指定目录，举例：把src的js文件打包到public lib目录,代码如下
.../*** 路径定义*/const paths = {src: {index: 'src/index.js'},public: {src: `${project_path}/public/src`,css: `${project_path}/public/lib`,dist: `${project_path}/public/dist`,lib: `${project_path}/public/lib`,es: `${project_path}/public/es`},dev: {app: `${project_path}/npm-tool-build`}};...const babelPlugin = {"plugins": ["@babel/plugin-proposal-class-properties","@babel/plugin-transform-modules-commonjs"]}const babelConfig = {"presets": ["@babel/preset-env","@babel/preset-react"],...babelPlugin};function buildJs(modules) {const config = modules ? esbabelConfig : babelConfigconst _path = modules ? paths.public.es : paths.public.libreturn gulp.src(jsGlob).pipe(plumber()).pipe(gulp.dest(paths.public.src)) // 输出源码.pipe($.replace('.scss', '.css')).pipe(babel(config))// .pipe(uglify()).pipe(gulp.dest(_path));}/*** 构建、监听编译输出js文件*/const jsGlob = ['src/**/*.js'];task('build:js', series(async () => {buildJs()}));task('build:js:es', series(async () => {buildJs(true)}));
为了方便后面es module到打包，把公共方法抽离出来,这样我们执行gulp build:js就会在public生成src一样目录的lib目录，lib目录下是经过编译压缩的，
考虑到我们需要保留es6按需导入的写法，执行gulp build:js:es会在public目录下生成es目录，在配置上两个命令区别只在于是否加上{modules: false},其他类似scss、jsx等类似js写一个相关解析的task任务
监听构建
我们在开发迭代开发的阶段，需要类似热加载那样持续监听构建并输出到指定目录，可能是某个项目的node_modules下进行调试。
这里主要运用到gulpWatch监听我们的源码目录，当源码文件改变时重新编译并输出，举例写个监听js文件的代码如下：
...task('watch:js', series(async () => {return gulp.src(jsGlob).pipe(plumber())//.pipe(gulpSourcemaps.init())// .pipe(changed(paths.public.lib)).pipe(gulpWatch(jsGlob).on('change', (thePath) => {console.log(`File ${thePath} has been changed`);}).on('unlink', (thePath) => {// console.log(`File ${thePath} has been removed`);const libPath = thePath.replace(/src/, 'public\\lib');const srcPath = thePath.replace(/src/, 'public\\src'); // 同步删除public下源码del([libPath, srcPath]);})).pipe(gulp.dest(paths.public.src)) // 输出源码.pipe($.replace('.scss', '.css')).pipe(babel(babelConfig))// .pipe(uglify())//.pipe(gulpSourcemaps.write('.', { includeContent: false, sourceRoot: '../src' })).pipe(gulp.dest(paths.public.lib));}));...
其它类型文件可以创建相应的task任务
最后效果如下：
发布npm包
通过gulp打包输出后，public目录是我们可以上传到npm官网的目录（记得修改package.json的版本号），具体操作可以google或度娘。