npm-npmscript-gulp-webpack

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

npm install -g xxx 会安装在系统目录下,安装的package能够在所有目录下使用。

package.json 有什么作用?

  • 定义了这个项目所需要的各种模块,以及项目的配置信息(比如名-
    称、版本、许可证等元数据)
  • 允许你指定你项目中所使用的node包的版本。
  • 构建你的项目更加容易,便于给其他人共享。

package.json包括以下基本配置

{
  "name": "demo", //package的名称
  "version": "1.0.0",// 版本号
  "description": "",//项目描述
  "main": "index.js",//指定别人使用这个包的入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },  //
  "author": "",  //作者
  "license": "ISC"   //版权相关
}

可以使用npm init -y快速创建基本配置

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

npm install --save app会把依赖包名称添加到 package.json 文件 的dependencies 属性下,记录此包所依赖的其他包.

  1. 如果我们下载别人的包只要输入--save,就会把别人包所依赖的包一起下载
  2. 如果我们自己在开发一个包供别人使用时只要输入npm install --save app会把我们开发包所依赖的app添加到 package.json 文件 的dependencies 属性下,
    记录自己开发的包会依赖于app.我们上传自己此包时就不需要上传自己所依赖的包以节省空间加快速度.
    下次再需要用自己此包时只要输入npm install自然就会把所依赖的包下载

npm install --save-dev app会把下载的包放在devDependencies(开发依赖) 的属性下,是我们开发测试时用的.
别人要下载引用我们的包是不会把devDependencies所列出的包下载来的(有需要才手动下载).而会把dependencies下所列出的包下载来

node_modules的查找路径是怎样的?

从当前文件目录开始查找node_modules目录;然后依次进入父目录,查找父目录下的node_modules目录;依次迭代,直到根目录下的node_modules目录。

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

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

优势:

  • webpack是以commonJS的形式来书写脚本,但对AMD/CMD的支持也很全面
  • webpack可以将代码拆分为多个区块,每个区块包含一个或多个模块,它们可以按需异步加载,极大地减少了页面初次加载时间
  • webpack本身只能处理原生JS模块,但是loader转换器可以将各种类型的资源转换成JS模块。这样,任何资源都可以成为webpack可以处理的模块
  • webpack有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是commonJS,AMD还是普通的JS文件。
  • webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的webpack插件,来满足各种各样的需求。
  • webpack使用异步I/O和多级缓存提高运行效率,使得它能够快速增量编译

npm script是什么?如何使用?

每个项目文件下一般都会有一个package.json文件,这个文件中会包含一个名为scripts的对象,由key-value形式组成
每个value都是一条可以直接在命令行中的命令,而key则对应其相应的value,只要在命令行中输入key则会自动执行所对应value的命令,以此实现对每个value命令的简化,
只要记住其key值即可.(注意这里的key不是可以随意书写,有其自身规定的一系列名字,除了test和start之外其他的key需在前加上run)

e.g.
{
  // ...
  "scripts": {
    "build": "node build.js"
    "start":  "mkdir abc"
  }
}

上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js。

命令行下使用npm run命令,就可以执行这段脚本。
$ npm run build
  等同于执行
$ node build.js

$ npm start即执行mkdir abc的命令,注意这里的start不需要写run

使用 webpack 替换 入门-任务15中模块化使用的 requriejs

code
demo

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

简介

  • gulp是一款node.js的应用
  • 主要用于打造前端工作流,可用于打包,压缩,合并等
  • 他有简单易用,无快不破等特性
  • 他拥有很多高质量的插件

gulp常用组件

  • gulp-minify-css //css压缩
  • gulp-uglify //js压缩
  • gulp-concat //合并文件
  • gulp-rename // 重命名
  • gulp-clean //清空文件夹
  • gulp-htmlmin //html压缩
  • gulp-jshint //js代码规范性检查
  • gulp-imagemin //图片压缩

用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

具体demo详见gulp-test
var gulp = require('gulp');            //依赖gulp
var minhtml = require("gulp-htmlmin"),
    cssnano =require('gulp-cssnano'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin');
                                       //gulp组件
gulp.task('html',function(){
  return gulp.src('./src/*.html')
  .pipe(minhtml({collapseWhitespace: true}))
  .pipe(gulp.dest('./disc'))
})                                        //html压缩
gulp.task('css',function(){
  return gulp.src('./src/css/style.css')
  .pipe(concat('merge.min.css'))
  .pipe(cssnano())
  .pipe(gulp.dest('./disc/css'));
})                                        //css压缩合并
gulp.task('compress', function (cb) {
     return gulp.src('./src/js/*.js')
      .pipe(concat('merge.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('./disc/js'));
 });                                       //js压缩合并
gulp.task('img', function(){
gulp.src('./src/img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./disc/img'))
});                                         //图片压缩
gulp.task('build',['html','css','compress','img']);

开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

node天气应用

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

推荐阅读更多精彩内容