Javascript 使用gulp脚本缩小js

因此，出于某种原因，我的gulp脚本出现了一些问题，

gulp脚本

无法将适当的js写入捆绑文件

因此，我有以下文件夹结构：

theme/  
- dist/  
--- css/
----- bundle.css
--- js  
----- bundle.js
- src/  
--- scss/  
----- bundle.scss
--- js/  
----- bundle.js
----- components/  
------- test.js

这是一个完美的

gulp styles

任务-它将

src/scss/

中的所有内容打包并导出到

dist/css/bundle.css

export const styles = () => {
    return src(['src/scss/bundle.scss', 'src/scss/admin.scss', 'src/scss/bulmapress.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCss({compatibility:'ie8'})
        .pipe(dest('dist/css'))
        .pipe(server.stream());
}

我的

src/scss/bundle.scss

文件包含以下内容：

@import "components/header";
@import "components/footer";

这是我为

gulpscripts

所做的任务，一旦我运行该任务，它就不会编译

src/js/components

中的内容。。它编译了

src/js/bundle.js

中的内容，它只是一个存储组件，用于定义

import“components/test”

。任务如下：

export const scripts = () => {
    return src(['src/js/bundle.js'])
        .pipe(dest('dist/js'));
}

我不确定我做错了什么，或者这是否是自然行为？有什么更好的替代方法可以做到这一点？下面是完整的

gulpfile.babel.js

，如果有人想查看的话

如果js不被捆绑到

bundle.js

中，而只是最小化到它自己的单独文件中，会更好吗

从'gulp'导入{src、dest、watch、series、parallel}//从“gulp”导入{src、dest、watch、series、parallel}；
从“yargs”进口yargs；
从“吞咽式sass”导入sass；
从“gulp clean css”导入cleanCss；
从“gulp if”导入gulpif；
从“gulp sourcemaps”导入源地图；
从“gulp imagemin”导入imagemin；
从“del”导入del；
从“浏览器同步”导入browserSync；
从“gulp-zip”导入zip；
从“/package.json”导入信息；
从“吞咽替换”导入替换；
const PRODUCTION=yargs.argv.prod；
const server=browserSync.create（）；
导出常量服务=完成=>{
server.init({
代理：“http://localhost:8888/starter"
});
完成（）；
};
导出常量重新加载=完成=>{
server.reload（）；
完成（）；
};
导出常量样式=（）=>{
返回src（['src/scss/bundle.scss'，'src/scss/admin.scss'，'src/scss/bulmapress.scss']）
.pipe（sourcemaps.init（））
.pipe（sass（）.on（'error'，sass.logError））
.pipe（cleanCss（{兼容性：'ie8'}）
.pipe（dest（'dist/css'））
.pipe（server.stream（））；
}
导出常量脚本=（）=>{
返回src（['src/js/bundle.js']）
.管道（目的地（'dist/js'）；
}

在进行丑化或缩小之前，必须使用gulp babel将ES6代码转换为ES5代码

阅读这篇关于gulp任务的文章，了解gulp的工作原理：