前端的多页面的开发环境搭建
前端的多页面的开发环境搭建
JavaScript 其它杂项
访问GitHub主页
共5Star
详细介绍
这是我工作中用的一个前端的开发环境。 1、使用sass实现CSS模块化。 2、webpack来做JS的模块化管理。 3、gulp用来构建打包。 注:支持@@include('*.html')直接引入HTML片段,一个页面基本上可以分为头部,底部,中间内容区,我们可以把这三块HTML定义成独立HTML片段放到include下供引用,方便页面共用,具体使用方式看下index.html即明白 同时支持图片自动压缩(特别是PNG可以减少60%左右的体积,跟 https://tinypng.com/ 压缩效果差不多); SASS自动解析压缩,支持把CSS以一模块一模块的方式写成SCSS文件,哪里需要用到直接@import即可,具体使用方式看下sass/page/index.scss即明白; JS自动压缩混淆,支持JS模块化书写,根据功能模块书写JS,再在需要的地方直接require即可,具体使用方式看下js/index.js即明白; 支持自动刷新同步,当在修改文件的时候只需按下ctrl+S即可实现自动同步修改到浏览器,脱离一修改一F5的痛苦; 一键打包,只需要执行一次构建操作即可得到dist目录,拿到最终上线文件。 目录介绍: images文件夹为开发的图片文件存放目录,支持再建子目录存放图片 sass文件夹所有scss文件存放目录,子目录page里存放最终要被解析的scss文件,page外是一些模块的scss文件 js文件夹是所有JS的存放文件,下面直接存放最终要被生成到dist/js的js文件,子目录lib是jquery的存放目录,子目录core是存放模化JS的地方,plugins是存放插件的地方 include是存放HTML片段的地方,主目录下的HTML文件可以直接通过@@include('include/*.html')引入需要代码片段 dist是最终生成的前端文件,也是最终能放线上去文件,由gulp直接生成 主要配置文件: gulpfile是gulp配置文件 package.json是需要的NODE模块列表,直接在当前目录下执行npm init即可实现自动安装所需要node模块,把node模块装到当前项目的父级感觉是一个好的选择 webpack.config.js是webpack的配置文件 使用步骤: npm install(如有安装失败的就可以删掉重新安装一下,由于被墙的厉害,经常会出现换败的情况,多试几次,或者直接使用淘宝镜像cnpm来安装) gulp default(会自动打开一个 locahost:3000端口的本地服务器,默认访问的是dist下的index.html,执行此命令即可开台开发工作) gulp build(这里文件上线前应该执行的一命令,他会清空dist目录,重新打包一个新的文件,删掉开发过程中产生的多余文件)
推荐源码
暂无源码 更多源码...