npm-npmscript-gulp-webpack

- npm的使用
- 开发node应用
- gulp介绍及实践
- npm scripts打造前端工作流
- webpack

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

npm install -g xxx,模块将会安装在电脑的全局目录中，安装的模块能够在所有目录下使用。

npm install express # 本地安装
npm install express -g # 全局安装
本地安装

1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 可以通过 require() 来引入本地安装的包。 

全局安装

1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 可以直接在命令行里使用。

如果你希望具备两者功能，则需要在两个地方安装它或使用 npm link。

2、package.json 有什么作用？####

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

下面是一个更完整的package.json文件：

{
"name": "Hello World",
"version": "0.0.1",
"author": "张三",
"description": "第一个node.js程序",
"keywords":["node.js","javascript"],
"repository": {
    "type": "git",
    "url": "https://path/to/url"
},
"license":"MIT",
"engines": {"node": "0.10.x"},
"bugs":{"url":"http://path/to/bug","email":"[email protected]"},
"contributors":[{"name":"李四","email":"[email protected]"}],
"scripts": {
    "start": "node index.js"
},
"dependencies": {
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
},
"devDependencies": {
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0",
}
}

package.json文件可以手工编写，也可以使用npm init命令自动生成。

$ npm init

有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。

$ npm install

如果一个模块不在package.json文件之中，可以单独安装这个模块，并使用相应的参数，将其写入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

• 上面代码表示单独安装express模块，--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。*

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

- 他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下；
--save-dev 则添加到 package.json 文件 devDependencies 键下；

- 其实它们真正的区别是，devDependencies 下列出的模块，是我们开发时用的；
- dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

4、nodule_modules的查找路径是怎样的?####

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

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

webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布。

优势：
1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

7、npm script是什么？如何使用？####

npm script允许在package.json中使用scripts字段定义脚本命令。

{
  //...
  "scripts": {
       "run": "npm install -g npm"
  }
}

执行npm run命令就等同于执行npm install -g npm命令。

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

代码
预览

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

• gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务

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

  1. 安装压缩插件
      安装图像压缩插件
      npm install gulp-imagemin --save-dev
      安装文件合并插件
      npm install gulp-concat --save-dev
      安装css压缩插件
      npm install gulp-cssnano --save-dev
      安装js规范检查插件
      npm install jshint gulp-jshint --save-dev
      安装js压缩插件
      npm install uglify --save-dev
  
  2. 载入插件
    var gulp = require('gulp');
    var cssnano = require('gulp-cssnano');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify'); // js压缩
    var imagemin = require('gulp-imagemin'); // image压缩
    var jshint = require('gulp-jshint'); // js代码规范性检查
  
  3. 定义任务
     定义css合并压缩任务
     gulp.task('build:css', function() {
         gulp.src('./src/css/*.css')
             .pipe(concat('index-merge.css'))
            .pipe(cssnano())
            .pipe(gulp.dest('dist/css/')); // 
     })
  
    定义js合并压缩任务
     gulp.task('build:js', function() {
        gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
    })
  
     定义图片压缩任务
    gulp.task('build:image', function() {
        gulp.src('src/imgs/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/imgs'));
    })
  
   gulp.task('build', ['build:css', 'build:js', 'build:image']);
  
   4. 执行任务
     在命令行中执行命令:
     gulp build