npm/gulp/webpack

如何全局安装一个 node 应用?

通过下面这个命令可以全局安装一个node应用

npm install --global appName

简写形式

npm i -g appName

通过全局安装的node应用会存放在'/usr/local/lib/node_modules'中。

package.json有什么作用?

package.json是.json格式文件,记录了node包的相关信息,如依赖,版本号,名字等,每当用户 npm install或使用命令行的时候,就会根据package下载相关依赖和执行相关文件。下面有几个比较重要的信息

"name": appName
//记录了这个node应用的名字
"version": "1.0.0"
//记录了node应用的版本,每次更新发布node包,都要更新version
"description": ""
//node应用的相关描述
"main": "index.js"
//node应用的入口文件
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}
//script可以集成一些命令行,通过'npm run + 命令行的名字'执行该命令行,简化操作
//有的命令名npm本身有定义,如test,star就不需要run
//script还有一个很重要的功能,就算我们不是做node包,也可以使用script功能来构建工作流
"dependencies": {}
//dependencies记录了node应用的相关依赖
"devDependencies": {}
//devDependencies记录了该node应用的开发依赖
//是node应用开发过程中用到,但和功能不相关的依赖,如debug等

npm install --save appnpm install --save-dev app有什么区别?

两条命令都是在本地安装node应用,安装在node_module文件夹中
现在假设我们在写一个node应用,用到app1和app2。
我们的node应用依赖app1,是node应用功能的一部分,没有app1,我们的node应用就跑不起来,这时候就要使用npm install --save app命令安装app1,这个命令在安装app1的同时,会把信息写入到我们node应用的package.json文件的dependencies中,用户install我们的应用时就会根据这条信息下载相关的依赖
此外,开发中我们还用到了app2进行辅助开发,app2和我们的应用功能没关系,是用来debug、测试、打包之类的,这种时候就可以使用 npm install --save-dev app来安装app2,安装的同时把信息记录到devDependencies,用户install应用是不会下载相关app,app2为开发依赖

node_modules的查找路径是怎样的?

在node.js中,模块分为内建模块,本地模块,node_module模块
当我们require一个模块时,先查找是否为内建模块,然后是否为本地模块,最后查找是否为node_module模块
当require的模块既不是内建模块,也不是本地模块,且在当前目录中的node_module中也找不到时,就会向上查找上一级的node_module,一直到根目录
当文件标识不以'./ ../'开头,则跳过本地模块查找,直接在node_module中查找

npm3与npm2相比有什么改进?yarn和npm相比有什么优势?

npm3改进了一些依赖算法
假设有两个包,app1和app2
app1呢依赖a1和b1
app2呢依赖a1和b2
在npm2下,会把两个包的依赖完全下载下来,分别放在app1和app2下,如图所示

npm2

npm3则会分析这几个包有哪些共同依赖,把共同依赖的包放在一起,共同使用,单独依赖包另外下载,如图所示

npm3

npm3比npm2更节省空间,但是npm2的结构目录更加清晰
yarn是Facebook推出的JS包管理器,yarn 是为了弥补 npm 的一些缺陷而出现的
1.npm在拉取包的时候,是从package.json中读取依赖信息,但是版本号不太会写得非常确切,通常是定个版本范围,这样会导致不同的人获取的包依赖版本可能不一样,导致出现意外情况
yarn则通过一个yarn.lock文件,锁定了这个包的依赖模块的确切版本号,在你新增或更新依赖时,都会更新yarn.lock文件。每次拉取这包,都会严格按照yarn.lock中的信息拉取,保证每个人拉取的包都是一致的。
2.npm在安装包时输出信息比较冗长,yarn则省去许多无用信息,只输出有用的信息。
3.yarn在拉取包的速度是要优于npm

Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you’ll still be able to fetch and publish packages as normal.

yarn拉取的包还是来自于npm仓库,yarn只是一个新的用来操作npm仓库的cli

webpack是什么?和其他同类型工具比有什么优势?

webpack是一个模块加载器和打包工具,它能把JS/css/图片等等的资源打包成模块使用
它的优势:
1.以CommonJS规范书写模块,同时也支持AMD、CMD规范
2.webpack本身只能读取JS,但可以使用loadsh将各种资源打包转换成JS模块,因此webpack不仅可以打包JS,还可以是css/html/图片等等
3.强大的插件系统

npm scripts是什么?如何使用?

npm scripts是package.json中的一条信息

"scripts" : {
      "test": "echo hello",
      "build": //command line
}

npm scripts中可以定义一些命令行,供npm快捷调用,像上面的例子,只要在命令行中输入npm test,就会执行echo hello这条语句
npm中内置了一些像是'test','star'这样快捷命令,只要在scripts中定义好,直接就可以使用

npm test
npm star

但是其他的自定义快捷命令就要使用run,像上面的'build',就要这样使用

npm run build

使用npm scripts,可以大大简化命令行的操作,建立快速工作流程

gulp是什么?使用gulp实现图片压缩、CSS压缩合并、JS压缩合并

gulp是一个以流为基础的前端自动化构建工具,可以实现css的压缩合并、js压缩合并、图片压缩等等
下面是gulpfile.js一些配置

var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),   //css压缩
    autoprefixer = require('gulp-autoprefixer'),    //css前缀
    imagemin = require('gulp-imagemin'),  //图片压缩
    babel = require('gulp-babel'),      //es6转换es5
    uglify = require('gulp-uglify'),      //js压缩
    concat = require('gulp-concat')    //文件合并


//css自动前缀和压缩合并
gulp.task('merge:css',function() {
    gulp.src('./src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 4 versions'],
            cascade: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/css'))
})

//图片压缩
gulp.task('merge:images',function() {
    gulp.src('./src/images/*.{jpg,png,gif}')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'))
})

//js压缩
gulp.task('merge:js',function() {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['env' ]
        }))
        .pipe(uglify())
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./dist/js'))
})

webpack改写企业站

Demo
源码

天气小工具!

npm

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

推荐阅读更多精彩内容

  • 题目1: 如何全局安装一个 node 应用? Node模块采用npm install命令安装。 每个模块可以“全局...
    萧雪圣阅读 1,769评论 0 1
  • 如何全局安装一个 node 应用? npm install -g package.json 有什么作用? 可以理解...
    邢烽朔阅读 569评论 0 1
  • 题目1: 如何全局安装一个 node 应用? 题目2: package.json 有什么作用? 每个项目的根目录下...
    饥人谷_Jack阅读 261评论 0 0
  • 题目1: 如何全局安装一个 node 应用? 如果下载速度比较慢,可以使用淘宝的镜像 install 可以缩写成 ...
    辉夜乀阅读 413评论 0 0
  • 面对考研 也许会有人说你不自量力,或者说你不可能 是的,说的没错,因为我自己也这样觉得,因为我学习差,基础差,又没...
    1860fb3b42da阅读 76评论 2 1