gulp构建

问答

1.nodejs 是什么?可以做什么?为什么擅长做?

  • Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
  • Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
  • 特性
    1.单线程
    2.非阻塞IO
    3.事件驱动
    4.RESTful API
    5.V8虚拟机
  • 应用:
    1.Web开发:Express + EJS + Mongoose/MySQL
    2.REST开发:Restify
    3.Web聊天室(IM):Express + Socket.io
    4.Web爬虫:Cheerio/Request
    5.Web博客:Hexo
    6.Web论坛: nodeclub
    7.Web幻灯片:Cleaver
    8.前端包管理平台: bower.js
    9.操作系统: node-os
    10.客户端应用工具: node-webwit
  • nodejs的几大特性奠定了node.js开发上述应用的优势
    1.动态语言:开发效率非常高,并有能力构建复杂系统,如ql.io。
    2.性能和I/O负载:Nodejs非常好的解决了IO密集的问题,通过异步IO来实现。
    3.连接的内存开销:每个Node.js进程可以支持超过12万活跃的连接,每个连接消耗大约2K的内存。
    4.操作性:实现了Nodejs对于内存堆栈的监控系统。

2.npm 是什么? 如何安装 node 应用?全局安装和本地安装有什么区别? --save与--saveDev的区别? node_module的查找依赖的路线是怎样的?

  • npm(node package manager)是NodeJS的包管理器,能够让用户上传或下载第三方库或应用,用于node插件管理(包括安装、卸载、管理依赖等)。
  • 全局安装可以计算机的任意目录下调用nodejs.本地安装只能在安装相应的目录下运行nodejs.
    1.全局安装命令npm install gulp -g 或 npm install gulp --global
    2.本地安装命令npm install gulp 或 npm install gulp --save-dev
  • npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,npm install --save 或 npm install --save-dev,区别如下:
    1.--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则把依赖包名称添加到 package.json 文件 devDependencies 键下
    2.dependencies键下的模块一般是生产环境下使用 ,devDependencies 键的模块一般是开发环境下使用
  • nodemoudle的查找路径是从当前的项目目录一直向上查找到系统的nodemoule根目录,这也解释了全局安装为什么生效

3.安装browser-sync并了解它的使用方式

  • Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是** Browsersync可以同时在PC、平板、手机等设备下进项调试**。
  • 安装方式(命令行)
    1.npm install browser-sync -g
    2.查看版本browser-sync --version,若有版本号则表示安装成功
    3.启动 BrowserSync
    3.1 如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:browser-sync start --server --files "css/*.css"
    3.2 如果您需要监听多个类型的文件,您只需要用逗号隔开例如我们再加入一个.html文件.browser-sync start --server --files "css/*.css, *.html"
    3.3 如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站.browser-sync start --proxy "主机名" "css/*.css"
  • 建议结合gulp或grunt来使用,效果更加

4.全局安装server-mock并了解它的使用方式

  • server-mock 是一个简单好用的用于前后端分离的 mock 利器, 基于 express 开发,可方便的 mock 数据,和一般基于配置的 mock 工具不同,server-mock可以创建使用范例,让使用者可让使用者模仿范例简单快捷的实现需求
  • 安装方式(npm命令)
    1.全局安装npm install server-mock -g
    2.安装完毕,命令行打开项目的文件,输入mock init
    3.server-mock还支持页面路由解析与模板渲染,在router.js里设置好对应路由下需要展示的数据以及对应的模板文件,即可通过浏览器看到渲染后的效果
    4.启动 webserver:mock start,在浏览器输入 http://localhost:8080 即可预览
  • 参考文档:server-mock

5.什么是前端构建,有哪些常见的前端构建工具?

  • 前端构建就是实现前端性能优化自动化、工程化的过程,前端构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的,比如我们会用 Less /Sass去写 CSS,会用 Jade 去写 HTML,会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等,工作性质重复机械,浪费大量人力物力,前端工具就是为了解决这个问题,
  • 常见的前端构建工具有gulp,grunt,Yeoman, WebPack等

代码

1.使用 gulp,实现一个项目的自动化构建, 要求:

  • 项目中包括多个 css 文件, 多个 js 文件,多个图片

  • 操作 src 目录,css 需要压缩合并,js 需要压缩合并,图片需要压缩,处理后放入 dist 目录

  • 以下是范例,推荐构建前面的任务中包含 css js和图片的项目

  • task41预览

  • task41代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,123评论 7 55
  • nodejs 是什么?可以做什么?为什么擅长做? nodejs是一个开放源代码、跨平台的、可用于服务器端和网络应用...
    coolheadedY阅读 325评论 0 0
  • 1. nodejs简介 Node.js是一个Javascript运行环境,封装了Google Chrome的V8引...
    进击的阿群阅读 287评论 0 0
  • 问答 1.nodejs 是什么?可以做什么?为什么擅长做? Node.js是JavaScript语言在服务器的运行...
    犯迷糊的小羊阅读 420评论 0 0
  • 2016年9月20日 星期三 晴 张荣轩妈妈 亲子日记第16篇 昨天我的心情不美丽,偷了懒没写日记。今天...
    爱意暖人心阅读 187评论 0 0