美文网首页
gulp构建

gulp构建

作者: GarenWang | 来源:发表于2017-01-01 01:10 被阅读0次

    问答

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

    相关文章

      网友评论

          本文标题:gulp构建

          本文链接:https://www.haomeiwen.com/subject/rukbvttx.html