npm-npmscript-gulp-webpack

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

npm install -g packagename

package.json 有什么作用？

package.json是一个json文件，每个项目的根目录下面，一般都有一个package.json文件，用于定义项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需要的模块，配置项目所需的运行和开发环境。

该文件可以手动创建json文件编写配置，也可以用命令行编写
命令行方法：在指定文件夹内，命令行创建语句

npm init

参考：npm package.json属性详解

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

npm install --save app：安装的是项目运行所依赖的模块，依赖名称会存到package.json里的"dependencies"字段里；

npm install --save-dev app：安装的是项目开发所需要的模块，依赖名称会存到package.json里的"devDependencies"字段里。

区别：比如类似于grunt，babel这类工具，是开发时使用的，就用--save-dev；而类似于jquery这种是给用户使用的，就用--save。

node_modules的查找路径是怎样的?

node_module：查找依赖的路线是：先从本地目录下寻找，不存在就依次向上级目录中查询，直到系统根目录。node全局安装在系统根目录下，所以全局安装后可在所有目录下使用。

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

npm：是node.js的包依赖管理工具，不过有的时候项目依赖过多，造成路径过深，超过了操作系统的文件深度限制。NPM3对此做了很大改进。简单的来说将传统的嵌套结构改为了平铺结构

比如，有一个模块A，依赖 B.
现在有个应用依赖A，运行
npm install

• npm3会将模块B放置到与A同级目录下
• 而npm2会将B放置到A的依赖模块目录下

image.png

如果有另外一个模块C，它依赖了一个不同版本的依赖模块B

image.png

在npm3中，不同版本的模块B会放置到C的依赖模块下

image.png

参考：npm3相对于npm2模块依赖目录层次的改进

Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 — Yarn，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的：

• npm 安装包（packages）的速度不够快，拉取的 packages 可能版本不同
• npm 允许在安装 packages 时执行代码，这就埋下了安全隐患

• yarn和 npm 相比有什么优势
  • 更快
    yarn缓存了每个下载过的包，所以再次使用的时候无需重复下载。同时利用
    并行下载以最大化资源利用率，一次安装速度更快。
  • 更安全
    在执行代码之前，yarn会通过算法校验每个安装包的完整性。
  • 更可靠
    使用详细和见解的锁文件格式和明确的安装算法，yarn能够保证在不同系统下无差异的工作

参考：Yarn vs npm：你需要知道的一切

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

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

当然灵活的模块管理只是webpack的众多特性之一，它还有众多优秀的特性：

1. 它同时支持commonjs和AMD规范（甚至混合的形式）；
2. 它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）；
3. 依赖在编译时即处理完毕，可以减少运行时包的大小；
4. Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理；
5. 丰富的和可扩展的插件可以适应多变的需求。

npm script是什么？如何使用？

npm script允许在package.json中使用script字段定义脚本命令。通过设置npm script可以方便的实现前端工作流。例如：输入命令npm run start，就会执行index.js文件。输入命令npm run begin，就会在命令行输出'there it goes'

"scripts": {
    "begin": "echo there it goes!",
    "start": "node index.js",

}

node script 使用

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

代码
demo

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

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

全局安装 gulp：
$ npm install --global gulp
作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
在项目根目录下创建一个名为gulpfile.js 的文件：

var gulp = require('gulp'); 
gulp.task('default', function() { 
// 将你的默认的任务代码放在这 
});

运行 gulp：
$ gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp

var gulp = require('gulp');
//引入组件
var minifycss = require('gulp-minify-css'), //css压缩
    uglify = require('gulp-uglify'), //js压缩
    minhtml = require('gulp-htmlmin'), //html压缩
    imagemin = require('gulp-imagemin'), //图片压缩
    concat = require('gulp-concat'), //合并文件
    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'), //清空文件夹
    jshint = require('gulp-jshint'); //js代码规范性检查
gulp.task('html', function () {
    return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
});
gulp.task('css', function () {
    gulp.src('src/css/*.css')
        .pipe(concat('merge.min.css'))
        .pipe(rename({
            suffix: '.min'
}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/'));
});
gulp.task('js', function () {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
});
gulp.task('img', function () {
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
});
gulp.task('clear', function () {
    gulp.src('dist/*', {read: false})
        .pipe(clean());
});
gulp.task('build', ['html', 'css', 'js', 'img']);//执行npm gulp build

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

npm install yqy-weather -g
weather guangzhou //需要使用城市拼音，不输入城市，将显示当前IP地址的天气

天气npm