Github初始目录设置合理总结了开头的文件，有助于后期的项目打包工作。├─index.html#HTML页面├─src|├─static#静态文件路径||└网站图标.png|├─js#JavaScript文件路径||└main.js|├─css#CSS文件路径||└使用原生开发页面运行同步预览的style.css项目有个问题，就是在测试的时候要不断刷新页面，而不是实时监控你的文件变化来刷新同步。当然我们可以使用VSCODE进行开发，使用liveserver插件进行同步预览。但并不是所有人都使用VSCODE进行项目开发，所以我们还是使用node来实现项目的同步预览。//初始化Nodeyarn//安装browser-syncyarnaddbrowser-sync这里我使用的是browser-sync，更多的使用方法可以在官网找到，这里不再赘述。安装完成后，打开命令行，执行以下命令。//进入项目路径cdnativeTemplate//实现browsersync（监听html、css、js文件）browser-syncstart--server--files"*.html,src/css/*.css,src/js/*.js》但是每次启动项目都要执行命令会很麻烦，我们可以在package.json中配置。{"scripts":{"serve":"browser-syncstart--server--files\"*.html,src/css/*.css,src/js/*.js\""}}这样我们以后只需要执行yarnserve就可以运行项目了。配置跨域当你原生开发，然后需要连接接口的时候，配置跨域是一件很头疼的事情。当然可以让后台设置接口跨资源共享CORS，达到跨域的目的。不过我们也可以使用http-server来实现跨域配置。//安装http-serveryarnaddhttp-server具体操作我就不多说了，大家可以看文档。这里只讲我们需要跨域使用的操作。我们先执行如下命令打开本地8888端口，然后重定向到我们的API接口。http-server-p8888--cors-Phttps://jsonplaceholder.typicode.com当然你还是可以在package.json中配置，然后执行yarnhttp-server启动。{"scripts":{"http-server":"http-server-p8888--cors-Phttps://jsonplaceholder.typicode.com"}}那么这个时候我们就可以请求main.js中的接口了向上。constbaseApi='http://localhost:8888';//请求数据（跨域请求）functionrequest(){fetch(baseApi+'/posts').then(response=>response.json()).然后(data=>console.log(`请求成功！`,data))}request();当然，这只能用于前端调试。项目实现的时候，我们可以把baseApi改成/api，然后让后台使用nginx重定向。项目打包按理说使用原生开发不需要打包项目，直接部署即可。但是在实际开发中，还是需要对项目进行打包。一是继续压缩文件，二是重命名静态文件，防止缓存问题。这里我们使用gulp来自动化项目打包。//安装yarngulpgulp-cssmingulp-htmlmingulp-revgulp-rev-collectorgulp-uglifydel其中gulp-cssmin、gulp-htmlmin、gulp-uglify用于压缩css、html、js文件；gulp-rev、gulp-rev-collector和del用于重命名静态文件。安装完成后，在根路径下新建gulpfile.js文件，先导入安装好的东西。constgulp=require('gulp');constrev=require('gulp-rev');constdel=require('del');constrevCollector=require('gulp-rev-collector');constuglify=require('gulp-uglify');consthtmlMin=require('gulp-htmlmin');constcssMin=require('gulp-cssmin');那么我们首先实现css的压缩和重命名。gulp.task('rev:css',()=>{returngulp.src('src/css/*.css').pipe(rev())//生成所有匹配的文件名版本号.pipe(cssMin())//压缩CSS.pipe(gulp.dest('dist/assets'))//将压缩后的新css文件保存到dist/assetspath.pipe(rev.manifest())//保存所有生成的文件nameswithversionnumberstotherev-manifest.jsonfile.pipe(gulp.dest('rev/css'))//将rev-manifest.json文件保存到指定路径})执行gulprev:css命令，路径下会多出dist和rev文件夹，dist/assets路径下会有打包的css文件，rev/css下会有rev-manifast。json文件，里面存放的是文件名映射表，用于后面替换index.html中的文件导入。同样，我们也可以对JavaScript等静态文件进行压缩和重命名。gulp.task('rev:js',()=>{returngulp.src('src/js/*.js').pipe(rev()).pipe(uglify())//压缩JS.pipe(gulp.dest('dist/assets')).pipe(rev.manifest()).pipe(gulp.dest('rev/js'))})gulp.task('rev:static',()=>{returngulp.src('src/static/**').pipe(rev()).pipe(gulp.dest('dist/assets')).pipe(rev.manifest()).pipe(gulp.dest('rev/static'))})然后依次执行gulprev:js和gulprev:static。然后我们需要替换index.html中的导入。gulp.task('rev-collector',()=>{returngulp.src(['rev/**/*.json','./*.html']).pipe(revCollector({dirReplacements:{//重置导入路径'src/css':'assets','src/js':'assets','src/static':'assets'},replaceReved:true})).pipe(htmlMin({//缩小HTMLcollapseWhitespace:true,collapseBooleanAttributes:true,removeComments:true,removeEmptyAttributes:true,removeScriptTypeAttributes:true,removeStyleLinkTypeAttributes:true,minifyJS:true,minifyCSS:true})).pipe(gulp.dest('dist'))})执行gulprev-collector后，在dist路径下可以看到新生成的index.html文件。至此，我们项目打包的基础工作就完成了。但是如果我们后面需要修改文件再打包工程，就需要提前清理掉dist文件下的所有文件，否则最后的文件会堆积起来，无法迭代。而且，rev文件夹也是如此。项目打包后，文件夹没有作用，可以删除。所以我们需要做一个清理文件的工作。//删除文件gulp.task('clean:init',(cb)=>{returndel(['dist/*','rev/*'],cb)})gulp.task('clean:rev',(cb)=>{returndel(['rev'],cb)})这时候我们在gulpfile.js中设置了6个自动化任务，每次都需要按照一定的顺序执行任务，所以我们可以将所有任务合并为一个。gulp.task('build',gulp.series('clean:init',gulp.parallel('rev:js','rev:css','rev:static'),'rev-collector','clean:rev'))现在我们可以对所有的打包操作执行gulpbuild。简单说一下自动化的工作流程：先执行clean:init，清空删除原来的dist和rev文件。其次，同步执行rev:js、rev:css、rev:static，压缩重命名所有静态文件。然后执行rev-collector替换index.html文件导入。最后执行clean:rev删除rev文件夹。同样，我们也可以将其配置到package.json中。{"scripts":{"build":"gulpbuild"}}然后执行yarnbuild打包工程。项目目录说明├─index.html#HTML页面├─src|├─static#静态文件路径||└网站图标.png|├─js#JavaScript文件路径||└main.js|├─css#CSS文件路径||└style.css├─dist#打包文件路径|├─index.html|├─资产||├─favicon-a35b664aff.png||├─main-ce0b6aa357.js||─gulpfile.js#gulp配置文件├─README.md#文档├─package.json#节点配置文件
