前端自动化流程工具_gulp_静态页面构建

前端异步流程工具 传统: 回调函数 流行: Promise *最流行 const p1 = new Promise ( function ( resolve, reject ) { resolve( '任务一' ) }) .then ( function ( data ) { console.log( data ) }) const p2 = new Promise ( function ( resolve, reject ) { setTimeout( function () { resolv

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.做网页就和用world编辑一个文档一样,只不过那个工具叫Dreamweaver.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有

npm init命令初始化当前文件夹后,在当前文件夹新建gulpfile.js文件.当前目录下的所有操作流都在gulpfile.js文件中定义. gulp自动化 gulp-uglify (JS压缩) gulp-uglify安装: npm install --save-dev gulp-uglify gulp-uglify用来压缩js文件,使用的是uglify引擎. var gulp = require('gulp'); //加载gulp var uglify = require('gulp-ug

1.gulp使用时需要安装2次,全局安装和本地安装(前提是要有nodeJS) npm install --save-dev gulp//全局安装 npm install --save-dev gulp//本地安装 跳到本地文件夹下,再安装一次 2.需要在本地建一个gulpFile.js文件 3.在gulpFile.js文件下引入第三方模块 var gulp = require("gulp"); //压缩代码模块 需本地安装 var uglify = require("gulp

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能帮我们干啥? 在开始介绍前,先向大家描述下面的场景: [场景1:项目开始前] 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟) 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuer

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p

今天突然心血来潮,想把前端的一些人工工作流程自动化,其实之前已经在用grunt进行自动化构建,但总是觉得还是有些事情未做好.首先说说,前端平时需要做那些自动化吧: 1. 先讲HTML,每个项目每个页面都需要统一的头部,其他标题,关键字,作者等meta自行修改,body部分每个页面各自填充,但使用的框架统一. 2. CSS,我使用的是less来编写,所以需要编译成css,另外,编译过程,一些css属性需要自动添加浏览器前缀,例如border-radius,属性最好自动按照类型排序,一些css的编写