npm-npmscript-gulp-webpack

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

npm是一个node包管理和分发工具，有了npm，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

node的安装分为全局模式和本地模式。
全局安装命令为$npm install -g moduleName。
在全局模式下，Node包会被安装到Node的安装目录下的node_modules下。

2： package.json 有什么作用？

作用：
1.相当于你本地项目的一个文档说明。
2.允许你指定你项目中所使用的node包的版本。
3.构建你的项目更加容易，便于给其他人共享。

一个比较完整的package.json文件

{
    "name": "Hello World",             //项目名称（必须）
    "version": "0.0.1",                 //项目版本（必须）
    "author": "张三",                   //项目作者信息
    "description": "第一个node.js程序",  //项目描述（必须）
        "homepage": "",                  //项目主页
    "keywords":["node.js","javascript"],  //关键词数组，方便在 npm search中搜索
    "repository": {                        //项目资源库
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",                   //项目许可协议
    "engines": {"node": "0.10.x"},    //指定工作的node的版本
    "bugs":{"url":"http://path/to/bug","email":"[email protected]"},//项目的提交问题的url和（或）邮件地址
    "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",
    }
}

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

-save-dev 是指将包信息添加到 package.json 里的 devDependencies节点，表示开发时依赖的包。
-save 是指将包信息添加到 package.json 里的dependencies节点，表示发布时依赖的包。

举个例子
gulp，gulp-less 等等编译js或者css的包，运行时是不需要的，所以建议安装到 devDependencies ，
如jade，express等包，运行时会用到，所以建议安装到 dependencies

4： node_modules的查找路径是怎样的?

从当前目录开始逐级向上查找node_modules

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

npm3相比npm2主要改进了依赖管理方案

npm 2.0 时代各个模块中的公共模块没有做到复用，都有自己的一份依赖，这些模块造成了很大的冗余。这种方式的一大弊端就是导致 node_modules 的目录层级非常的深，以至在 windows 下会出现 node_modules 路径过长，无法删除

npm3版本npm install 时会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下

yarn和 npm 相比的优势

• 急速
  下载速度快，下载任务是并行下载，而npm是按顺序一个一个下载
• 缓存
  会缓存下载过的包，下载过的包甚至可以离线下载，npm不能
• 清晰
  输出不冗余，进度条形象
• 安全
  下载前检查签名及包的完整性
• 可靠
  各平台依赖一致性，yarn.lock自动更新
• 优化
  下载失败自动重新请求，对网络资源最大化利用，避免无用请求

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

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系。

WebPack和Grunt以及Gulp相比有什么特性

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

Webpack的处理速度更快更直接，能打包更多不同类型的文件。

7：npm script是什么？如何使用？

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。供 npm 直接调用。

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

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

命令行下使用npm run命令，就可以执行这段脚本。

$ npm run build
# 等同于执行
$ node build.js

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

预览
代码

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

gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。
使用gulp可以做什么：
1.编译 sass
2.合并优化压缩 css
3.校验压缩 js
4.优化图片
5.添加文件指纹（md5）
6.组件化头部底部（include html）
7.实时自动刷新…

各种插件及使用

var gulp = require('gulp'), // 必须先引入gulp插件
    del = require('del'),  // 文件删除
    sass = require('gulp-ruby-sass'), // sass 编译
    cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道
    uglify = require('gulp-uglify'), // js 压缩
    rename = require('gulp-rename'), // 重命名
    concat = require('gulp-concat'), // 合并文件
    notify = require('gulp-notify'), // 相当于 console.log()
    filter = require('gulp-filter'), // 过滤筛选指定文件
    jshint = require('gulp-jshint'), // js 语法校验
    rev = require('gulp-rev-append'), // 插入文件指纹（MD5）
    cssnano = require('gulp-cssnano'), // CSS 压缩
    imagemin = require('gulp-imagemin'), // 图片优化
    browserSync = require('browser-sync'), // 保存自动刷新
    fileinclude = require('gulp-file-include'), // 可以 include html 文件
    autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 浏览器前缀

图片压缩

1、基本使用
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});
2、gulp-imagemin其他参数
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});
命令提示符执行：gulp testImagemin

CSS 压缩合并

var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat');

gulp.task('cssmin',function(){
 gulp.src('src/css/*.css')
     .pipe(concat(min.css))      //合并后的文件名
     .pipe(cssnano())              
     .pipe(gulp.dest(dist/css));
}); 

JS 压缩合并

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.tast('jsmin',function(){ 
 gulp.src('src/js/*.js')
     .pipe(jsmin())
     .pipe(concat('all.js'))
     .pipe(gulp.dest('dist/js'));
});