npm and webpack

[MorganXie]

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

全局安装 ：npm install -g packageName

package会被下载到到特定的系统目录下( /usr/local/lib/node_modules/)，安装的package能够在所有目录下使用。

package.json 有什么作用？

package.json定义了这个项目所需要的各种模板，以及项目的配置信息，当我们使用npm init命令时即可以生成package.json.

{
        "name": "my_package",     //项目名称，只能一个单词且全小写，允许-和_。发布的时候名字和npm官网不重名
        "version": "1.0.0",      //版本号。 
        "main": "index.js",      //main字段指定了加载的入口文件。
        "scripts": {                 //指定了运行脚本命令的npm命令行缩写
            "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个test的空文件夹、用作写测试代码。
        },
        "keywords": [],  //项目的关键词。
        "author": "ag_dubs", //作者名称
        "license": "ISC", //协议 
        "repository": {  // 用来存放到 版本管理远程服务。
            "type": "git",
            "url": "https://github.com/ashleygwilliams/my_package.git"
        },
        "dependencies": {   // 正式使用时，依赖的包
            "my_dep": "^1.0.0"
        },
        "devDependencies" : {//开发或者测试时，依赖的包，用户使用时不会被下载。
            "my_test_framework": "^3.1.0"
        }
        "bugs": {一个对象，包含url网址和邮箱，当使用者发现问题时，可以通过这两种方式提交问题
            "url": "https://github.com/ashleygwilliams/my_package/issues"
        },
        "homepage": "https://github.com/ashleygwilliams/my_package"  //项目主页
    }

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

1. npm install --save app：将在当前目录导入npm依赖包，并写入'dependencies'字段，当其他人下载代码并运行npm install时会自动下载。

2. npm install --save-dev app：将在当前目录导入npm依赖包，并写入'devDependencies'字段，当其他人下载代码并运行npm install时不会自动下载。

node_modules的查找路径是怎样的?

当require一个模块xxx时，会首先在当前目录下寻找node_modules下的xxx，若没有，则返回到上一级目录的node_modules下寻找xxx，最终会找到根目录下node_modules下的xxx。

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

webpack 是一款模块加载器兼打包工具，它能把各种资源 JS、CSS、图片等都作为模块来使用和处理。

webpack的核心是一切皆模块的思想，所以，任何模块，CSS，图片，字体，都被webpack当做模块来处理，我们只需要在需要这些模块的时候来require。

webpack的优势一：Code Splitting代码分割

过去，传输模块时有两个极端：

1. 一个请求获取一个模块
   （requirejs 每一个require的模块，对应的都是一条网络请求）

优点：只传送所需的模块
缺点：许多请求意味着很多开销
缺点：因为请求的延迟，程序启动缓慢

2. 一个请求获取所有模块
   （r.js 把所有的模块都打包成一个网络请求）

优点：请求开销减少，延迟小
缺点：暂时并不所需的模块也被传送
webpack将请求的模块组拆分成许多小块。
被复用的模块组被一次请求最开始就获取，最初不需要的模块的块则可以按需加载。 拥有初始下载量小，并在应用程序请求时按要求下载代码的优势。

webpack的优势二：Loaders加载器

通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。它可以取代gulp的压缩图片打包js等功能

webpack的优势三：Clever parsing解析

用 commonJS 来书写，对 AMD/CMD 支持也很全面。

webpack的优势四：插件系统

webpack具有丰富的插件系统。

npm script是什么？如何使用？

npm script 是利用packge.json中 script 这个属性，制定一个工作流。
简化命令行的使用。

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

地址

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

gulp是前端自动化构建工作流的利器，自动化地完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

glup安装及使用

$npm install gulp-cli -g //全局安装gulp,作为命令行工具是不能require到的
$npm install gulp -D //在当前项目的目录下安装gulp，才能require到，等于 npm install --save-dev gulp
$touch gulpfile.js  //新建gulpfile.js文件
$gulp --help

gulp是一个对象，对象里有如下几个方法

gulp.src | gulp.dest | gulp.task | gulp.watch

参见gulp文档

gulp.src(globs[, options])：把哪些文件放入glup中处理，采用正则表达式的写法，可以是字符串或者数组，通过gulp转化成数据流
gulp.dest(path[, options]) 将数据流导出成文件
gulp.task(name [, deps] [, fn]) 创建任务，一个任务可以认为是一个流水线 [, deps] 依赖是并行的
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 监测文件内容的改动

gulp运行

终端运行gulp taskname
如果想要直接gulp就能运行，可以将原taskname改为default或者新建一个task，
taskname为default

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

gulpfile.js文件中

var gulp = require('gulp');
//引入组件
var minifycss = require('gulp-minify-css'),//css压缩
    uglify = require('gulp-uglify'),//js压缩
    concat = require('gulp-concat'), //合并文件

    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'),//清空文件夹

    minhtml = require('gulp-htmlmin'),//html压缩
    jshint = require('gulp-jshint'),//js代码规范性检查
    imagemin = require('gulp-imagemin');//图片压缩

gulp.task('html',function(){
    return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
});

gulp.task('css',function(argument){

    gulp.src('src/css/*.css')
        .pipe(concat('merge.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/'));
});

gulp.task('js',function(argument){
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))

        .pipe(concat('merge.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('img',function(argument){
    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']);//运行gulp build的时候，相当于把html,css,js,img都运行了

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

npm 地址

使用 XXweather + cityName获取指定地址的天气（如果不写cityName 则获取当地天气）