npm/gulp

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

JavaScript是一门脚本语言,包括围绕浏览器API的功能核心DOM,BOM以及JS的语法核心ECMAscript,所以浏览器就是JavaScript的解释器,脱离浏览器JS无法运行。
而发明node的Ryan Dahl一开始是想做一个非阻塞I/O,事件驱动的web服务器,找来找去发现Javascript历史包袱最少,语言也较为轻便于是和JS相结合(引用其语法核心ECMAscript)成为了今天的nodejs。官方解释是:NodeJS是基于chrome V8引擎的运行时。其特点为:

  • 单线程(继承JavaScript的特性)
  • 事件驱动(各种回调,所以必定不会锁死线程)
  • 非阻塞I/O(由特性二)

由于它的这些特性,注定不能适用于CPU密集型的场景,而适用于I/O密集型的场合。所以现在NodeJs多用于做计算简单的后端处理或是中间层(来接受/发送请求,把客户的复杂请求交给纯后端去计算,同时将结果抛给前端去让其呈献给用户)。

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

npm(node package manager)顾名思义它是NodeJS的包管理器,能够让用户上传或下载第三方库或应用,用于node插件管理(包括安装、卸载、管理依赖等)。
安装node应用步骤:

  • 首先,下载安装NodeJS(官网
  • 安装完毕后输入node -v以及npm -v,如果出现版本号则安装成功。
  • npm现在内置于NodeJS中,但由于服务器在USA,下载速度不稳定,所以国内可使用淘宝团队的cnpm作为替代,安装方式:在命令行输入:npm install cnpm -g --registry=https://registry.npm.taobao.org,同样命令行输入cnpm -v来验证成功。如果执行该步,往下所有的npm均可用cnpm代替;
  • 使用npm安装插件,在命令行输入:npm install <name> [-g][--save-dev](<>表示必填,[]表示选填):
    name:插件名;
    -g:全局安装。在windows系统中将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录;
    全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;
    --save:将安装信息保存在pacakge.json中,package.json是npm的项目配置文件,保存在项目根目录下。(项目开发过程中需要使用的插件大多相同,所以成功配置好package.json后应当保留,在有packge.json的当前目录下输入npm install即可按照配置下载插件);
    -dev:将插件名版本号保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点。两者的区别在于,前者是生产环境,后者是开发环境。
  • node_module的查找是从当前目录一直查找到根目录,所以这也是全局为什么能够生效的原因。

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

browser-sync是一个npm上的插件,它能让浏览器快速响应即时修改的html,css,js的修改,省去了每次修改都要刷新浏览器的烦恼。

  • 首先通过npm将其安装:npm install browser-sync -g
  • 输入browser-sync --version,若响应版本号则表示安装成功;
  • 在项目文件下打开命令行输入browser-sync start --server --files <file name>file name为需要关联的文件名,若多个可用,隔开如browser-sync start --server --files "*.css,*.html")。此时,该插件将自动创建端口号为3000的本地服务器,并监听关联文件的改动,对关联文件的每次改动都将直接体现至所在网页而无需刷新。
  • 如果是动态网站,则需要绑定主机名,写法为:browser-sync start --proxy "主机名" "<file name>"
  • gulp一起食用更佳。

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

server-mock是用来模拟后端数据生成,方便前端写AJAX的一个小工具。
安装方法:

  • 全局安装:npm install server-mock -g
  • 安装完毕后,在项目文件的命令行中输入:mock init建立初始化文件;
  • 通过改变router.js中的代码来模拟数据,将index.html中所需的模拟方法置入自己的网页中;
  • 输入:server start来启动服务器,地址为localhost:8000

具体方法mock-server

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

提供一套工具来替代一些重复性操作,例如:我们在上线前一班会把各种文件压缩一遍,但如果突然发现了一个BUG需要回头修改,改完后需要再压缩一次才能上线。这里的压缩就是一次重复性劳动,我们完全可以用代码来让计算机自动的将文件压缩,而不是每次都需要手动压缩,所以用前端构建将大大地提高工作效率。
现在主流的工程化工具有:webpack,gulp(两者结合使用效果更好)。

gulp的简单使用

gulp是前端工程化中最便捷的工具之一,用户通过配置个性化的插件,来提高工程师的开发效率。gulp如同操作系统一般,本身不提供任何功能,只是作为底层基础,而基于gulp的插件就如同应用软件,能够实现各种功能。gulp又像是工厂的流水线,在完成其配置之后,只需要输入gulp(默认的default配置)或是gulp xxx(选择指定的插件),即可自动的完成所有的操作。所以,gulp的确是大大的方便!

先定一个小目标:用gulp进行一次简单的压缩操作。

1.在项目文件的根目录下输入npm init,创建packge.json文件(可以为空)。
2.输入npm install gulp --save-dev,此时你将在package.json文件中看到:


同时node_modules文件夹中会出现gulp文件夹。

3.安装插件
如requier-dir,gulp-concat,gulp-htmlmin等等。无论何种项目都推荐安装requier-dir,它能使项目的逻辑分层更加清晰。

4.根目录新建gulpfile.js 、 gulp文件夹
gulp文件夹里再新建一个tasks文件夹和config.js文件;
tasks文件夹里创建default.js,以及你认为所需要的执行工艺流程的js文件。
tasks文件里存放对应的任务、config.js配置任务的相关配置。
结构如下:

5.编写配置文件

  • 配置gulpfile.js:
var requireDir = require('require-dir');    
requireDir('./gulp/tasks', { recurse: true});  
  • 配置config.js(关键在于路径的正确设置,以压缩html和压缩css为例):
//   gulp命令会由gulpfile.js运行,所以src和build文件夹路径如下(根目录下) 
var src = './src';                    //待操作的路径
var dest = './dist';                 //操作完成后的路径
module.exports = {
    html: {                             //这是单个任务名,对象中的src/dest为必须项
        src: src + "/*.html",     
        dest: dest + "/",     
        settings: {                  //settings为可选项,其参数应当查阅具体插件的使用方法。
            collapseWhitespace: true,
            removeComments:true
        }
    },
    css: {
        all: src + "/**/*.css",
        src: src + "/css/*.css",
        dest:dest + "/css",
        settings:{
        }
    }
}
  • 配置单个任务js文件(同样以压缩html和压缩css为例):
    在htmlmin.js中输入:
//添加依赖的模块
var gulp = require('gulp');
var htmlmin = require("gulp-htmlmin");
var config = require('../config').html;
//gulp的语法命令及待办事项
gulp.task('html', function(){
    return gulp.src(config.src)         
        .pipe(htmlmin(config.settings))    
        .pipe(gulp.dest(config.dest))   
});

在minify-css.js中输入:

//添加依赖的模块
var gulp = require("gulp"),
    cssmin = require("gulp-minify-css"),
    concat = require("gulp-concat");
var config = require('../config').css;
//gulp的语法命令及待办事项
gulp.task("css",function () {
    return gulp.src(config.src)
        .pipe(concat("merge.min.css"))
        .pipe(cssmin(config.settings))
        .pipe(gulp.dest(config.dest));
});
  • 在default.js中将所有待办任务集中
var gulp = require('gulp');
gulp.task('default', ['html','css','image']);

6.执行gulp
大功告成,在项目文件中输入gulp,所有的事就自动帮你做好了

这只是gulp的冰山一角,真正使用还得根据不同的需求去寻找合适的插件。

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

推荐阅读更多精彩内容