美文网首页
gulp构建-Assignment

gulp构建-Assignment

作者: 犯迷糊的小羊 | 来源:发表于2016-11-07 23:54 被阅读55次

问答

1.nodejs 是什么?可以做什么?为什么擅长做?
  • Node.js是JavaScript语言在服务器的运行环境,就如同当JavaScript语言作为客户端脚本时,其运行环境是浏览器一样;

  • Node作为JavaScript的运行环境,可以从以上两方面去理解:

JavaScript通过Node在服务器上运行;
Node提供大量的工具库,使得JavaScript与操作系统得以互动(如读写文件)

  • Node内部采用Google公司的V8引擎作为JavaScript的解释器,通过自行开发的linuv库调用操作系统的资源,从而使得JavaScript有望同时成为一门服务端语言;

  • Node.js采用事件驱动、异步编程,因此可以作为网络服务器来使用;

  • Node.js非阻塞模式的IO处理使Node.js在相对低系统资源耗用下拥有高性能与出众的负载能力;

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

npm是什么

npm有两层含义,一是Node的开放式模块登记和管理系统,二是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块。

全局安装和本地安装有什么区别

每个模块可以“全局安装”,也可以“本地安装”。“全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一般来说,全局安装只适用于工具模块,比如eslint和gulp。“本地安装”指的是将一个模块下载到当前项目的node_modules子目录,然后只有在项目目录之中,才能调用这个模块;

//全局安装
$ npm install -g gulp

//局部安装
$ npm i jquery

--save与--save-dev的区别

--save参数表示将该模块写入dependencies属性,--save-dev表示将该模块写入devDependencies属性;

{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

dependencies字段指定了项目运行所依赖的模块,devDependencies指定项目开发所需要的模块。

它们都指向一个对象。该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。

node_module的查找依赖的路线是怎样的

从本地文件开始一直往上查找至系统根目录

3.安装browser-sync并了解它的使用方式
  • Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面

  • npm install browser-sync -S安装模块,键入```browser-sync start --server --files ".css",".js","*.html"``命令,BrowserSync 将启动一个小型服务器,并提供一个URL来实时查看您的网站

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

  • server-mock --help查看辅助信息

命令:
  start  启动 webserver
  init   创建使用范例
查看命令的详细使用, 输入 <command> --help
如:..\AppData\Roaming\npm\node_modules\server-mock\bin\server start

5.什么是前端构建,有哪些常见的前端构建工具?
  • 前端构建是具体指自动化构建(Build Automation),旨在将每次项目版本的更迭需要重复的操作(代码语法检查、资源压缩、文件合并等)通过自动化构建工具(Webpack/gulp/grunt)实现自动构建功能

代码

使用 gulp,实现一个项目的自动化构建, 要求:
1.项目中包括多个 css 文件, 多个 js 文件,多个图片
2.操作 src 目录,css 需要压缩合并,js 需要压缩合并,图片需要压缩,处理后放入 dist 目录
3.以下是范例,推荐构建前面的任务中包含 css js和图片的项目

+ dist
    + css
        - merge.min.css
    + js
        - merge.min.js
    + img
        - a.png
        - b.png
+ src
    + css
        - a.css
        - b.css
    + js
        - a.js
        - b.js
    + img
        - a.png
        - b.png
- index.html

【github】

相关文章

  • gulp构建-Assignment

    问答 1.nodejs 是什么?可以做什么?为什么擅长做? Node.js是JavaScript语言在服务器的运行...

  • 相关文章记录

    1.gulp构建工具相关信息 前端自动化构建工具gulp记录Gulp.js-livereload 不用F5了,实时...

  • gulp的简单使用

    gulp构建项目 1.安装gulp,创建gulpfile.js作为入口文件 2.确定需要构建的文件,列出构建任务和...

  • gulp

    gulp解释 GULP 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。GULP 是 基 于 Nod...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • 使用gulp构建TypeScript项目

    使用Gulp构建TypeScript,在Gulp管道里添加Browserify, uglify或Watchify。...

  • 初认gulp

    为什么是Gulp? 类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。已...

  • Gulp笔记

    Gulp.js Gulp.js 是一个构建工具,与Grunt相比,Gulp更加简洁,执行效率更高。 安装Gulp ...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

  • 1,node.js

    自动化构建工具 gulp webpack grunt gulp--构建项目,压缩合并处理,依赖于 gulpf...

网友评论

      本文标题:gulp构建-Assignment

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