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代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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