前后端分离脚手架

栏目: 编程工具 · 发布时间: 6年前

内容简介:前后端分离脚手架

front-end-separate(前后端分离脚手架)

front-end-separate

一个前后端分离的脚手架工具(自主研发)

为什么选择grunt而不是gulp

如果你也和我一样喜欢grunt这种配置的方式,那么我相信这个脚手架觉对十分适合你

所有静态资源都md5全并压缩打包,css,js,img,html

已在生产环境验证

基于express和grunt的前后端分离框架

模板引擎使用的是nunjucks,好处是可以实现模版继承,又不像jade一样把html标签都简化了

express提供路由服务

项目中app为原代码文件(开发用),dist为打包后的文件(用于线上)

开发使用app,线上使用dist,支持一键cdn部署,加速你的项目

项目启动时,修改任何express代码,可以实现自动重启--基于nodemon

支持sass图片精灵(自动打包精灵图片,再也不用手动去拼凑了)

基于grunt md5 打包合并

线上输出的html已经压缩成一行(让你的代码更有Geeker范)

怎么使用:

clone 代码

启动命令行:

如果没有安装grunt,请先全局安装grunt

$ npm i grunt-cli -g

安装npm包(可能需要一段时间,请耐心等待)

$ npm i

开发模式(可以打开浏览器localhost:3001开始开发,端口配置文件里可以更改)

$ grunt

打包

$ grunt build

打包成CDN模式(config/config.js中可配置cdn路径)

$ grunt buildCdn

browserSync(可以实现更改静态资源自动刷新了)

$ grunt serve

浏览器输入localhost:3001,你就可以看到漂亮的页面了

打包命令 grunt build 会生成dist文件夹,里面可以看到js、css都加了md5缀

tip:scss推荐用Webstorm自带的File watch功能,非常方便(安装node-sass即可)

-关于图片精灵

$ grunt sprite 执行即可得到精灵图片,如需配置请去config/grunt/sprite.js下配置更多的图片精灵

在scss中引用@import "sprite" 样式中写如:@include sprite($index_bg); 即可使用;

如果大家喜欢的话,请点一下star此项目或follow一下本人,即是对本人最大的支持

我会继续完善这个项目的,并一直维护下去,如果有任何问题,欢迎在issues里面提出

感谢大家支持!

——Nobody

前后端分离脚手架

扫码关注w3ctech微信公众号


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Visual Thinking

Visual Thinking

Colin Ware / Morgan Kaufmann / 2008-4-18 / USD 49.95

Increasingly, designers need to present information in ways that aid their audiences thinking process. Fortunately, results from the relatively new science of human visual perception provide valuable ......一起来看看 《Visual Thinking》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具