1:设计图--->分出几个独立模块--->颗粒化布局--->文档流控制整体布局--->固定位置的元素绝对定位,段落这种元素不可绝对定位.----->加上和后台交互用的js代码---->会采用常规的交互写法. 头部:header 登录表单:form_list 按钮:but 文本:con_text 商品:goods 说明:text_explain 2:独立模块内部还可细分--->抽象出公共部分. 例如按钮 but:共同样式 small_but:小按钮独有样式 big_…

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().…

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏…

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如…

今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz $ ./configure --prefix=/usr/local/nodejs $ make && sudo make install 装好后,npm 已经在/usr/local/nodejs/bin/npm. 如果之…

项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin  压缩js gulp-minify-css  压缩css gulp-imagemin  压缩图片 gulp-rename  重命名 gulp-clean  清空文件夹 gulp-copy  拷贝引用库,字体等文件 gulp-replace  替换html内容(将原来.js引用改为.min.js引用) 前置过…

什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片等等. 我看了很多网上的资料,目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.而grunt多用在文件较多,逻辑复杂的项目构建,如果只是用来管理小项目的话,gulp方便快捷,是最适合不过的了.…

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢…

Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部署略有提及,本意是用作公司内部的技术安利.所用源码及文档本身见于 github jusfr/HelloGitflow 前言 Gitflow 是一种 git 分支管理工具——说是思想也不为过,它使用既定策略区分和管理开发.测试.生产环境的代码版本,对测试与持续集成友好,与敏捷.迭代的思路一致. 1 准…

如果你的前端项目很小或都者项目不需要通过专门的运维同学走流水线上线部署的话,那么可以略过以下的繁文. ok,Let's go! 我们看看如何使用grunt来部署上线项目? 前端项目一般分为两种类型:The first,纯静态页面,都是html,类似WebApp(当然也有很多动态页面的WEBAPP): The second,包含一些动态页面,如jsp.php. asp.net 或者是一些别的web服务语言. 由于第二种类型的前端的项目居多,那么我们先从第二种类型的项目上入手,使用grunt来操作项…

在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框架是angular,所以在这里主要说Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架. 什么是Yeoman? Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTM…

一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/, 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

利用angular-cli的常见命令: npm i --save 包名   ->  软件依赖    npm i --save-dev 包名     ->  开发依赖    ng new 项目名  ->  创建新项目    ng build -prod  ->  生产环境编译    ng serve  ->  启动开发服务器    ng new 项目名 --skip-install  -> 不进行模块安装  ng new 项目名 -si    ng new 项目名 -si…

npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手 暂时解决方案:扩大node运行程序的内存,经本人测试(项目和机器固定) 2G:308.11s 4G:284.96s 6G:280.94s 8G:277.63s 10G:277.86s 因此看出设定为8G差不多,因为再往后效果已经不明显了 设定方法: 在package.json文件中将命令修改,也可以在执行命令的时候添加,…

前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍jenkins的使用 安装 Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建.测试和部署等功能.由于 jenkins是基于java环境运行的,所以首先需要安装java环境 1.安装依赖包,使得add-apt-repository命令可以进行 apt-get insta…

现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory.并且打包速度相当慢,估计项目过大了. 解决方案一:通过 package.json 中的 "build" 加大内存 /* package.json 文件 */"scripts": { "de…

原始发布部署: 石器时代的我们,先是本地打包好项目,在去服务器上把原来的文件删了,然后回到本地copy到服务器: 这操看起来简单,实际部署的人就知道多烦了,假如来几个项目都要重新发布:那就爽了: 今天小编分享个自动打包部署方法,Jenkins 上只要你的小鼠标轻轻一点就OK: 正文: 首先是服务器上安装 Jenkins :前提呢要现在服务器上安装Java 环境  因为他是依据Java 环境运行的: 这里如何安装就不多说了,请参考这位哥们的博文 https://blog.csdn.net/runn…

  1.安装 nodejs.npm $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get install -y nodejs # 10版本的node已包含有npm,所以不需要另外执行 apt-get install -y npm 注:如果是在其他 docker 镜像中集成 node 环境,Dockerfile 局部参照如下, USER root RUN apt-get update &&am…

文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是icontfont.ttf, 在开发过程中,往往需使用到各式各样的icon图标,而有的图标库提供的资源并不多,由于icon图标属于字体样式,如果使用图片替代的话,缺点比较明显,比如放大失真,每次联网都要加载等.所以往往需要自己利用其他的icon图标库自定义图标样式,下面借用阿里巴巴矢量图标库为例分享…

今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz $ ./configure --prefix=/usr/local/nodejs $ make && sudo make install 装好后,npm 已经在/usr/local/nodejs/bin/npm. 如果之…

前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <met…

1. 搭建前端项目 1.1 创建项目目录 cd 项目目录 vue init webpack lufei 根据需要在生成项目时,我们选择对应的选项, 效果: 根据上面的提示,我们已经把vue项目构建好了,接下来我们可以在pycharm编辑器中把项目打开并根据上面黄色提示,运行测试服务器. 打开项目已经,在pycharm的终端下运行vue项目,查看效果. npm run dev 1.2 初始化前端项目 清除默认的HelloWorld组件和APP.vue中的默认样式 1.3 安装路由vue-route…

前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通过下面的方法对前端项目进行优化,减小打包后生成的js大小,从而提高加载速度.下面以USM项目为例,进行优化: 一.公用静态资源通过CDN加载 目前所有项目都通过npm包的形式引入vue.vue-router.axios.vuex.element-ui.ucar-view这些第三方包,webpack打…

前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package.json来下载 根据package-lock来锁定具体版本号 2.执行  cnpm run dev  来运行项目(不能使用npm run dev 会出现很多问题) 关注问题点: 1.向目包运行过程中cnpm install 可能需要重复执行,直到所有的包都完成了安装. 2.部分编译的时候报错出现找…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 使用 Webpack 打包基础设施代码已经很大程度上解决了生产力,但日益复杂业务和逻辑仍然让前端陷入"动态一时爽.重构火葬场"的笑谈,TypeScript 为解决这个问题而来. 在本章节我们使用 TypeScript 完成一个类…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第1部分 使用 Docker 搭建私有NPM仓库 关于 Docker 的使用不在本文之中,请自行参考其他文档. 经过测试, keyvanfatehi/sinopia 可用. 将 docker image 拉下来…

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c…

vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks.json”文件,内容为: { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0…