npm_npmscript_gulp_webpack

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

npm install -g xx 其中的-g表示全局安装

题目2： package.json 有什么作用？

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

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

• --save 会把依赖包添加到 package.json 文件 dependencies 下，为此模块正常运行所需要的依赖
• --save-dev 则添加到 package.json 文件 devDependencies 下，不是模块正常运行的依赖，开发环境下才会用到 发布时不会上传

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

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

题目6： 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和多级缓存提高运行效率，使得它能够快速增量编译

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

scripts字段 scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。 下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

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

github链接

题目9：gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 实践看到10分钟

它是前端自动化构建工作流的利器，可以使用多个插件实现代码打包、压缩、合并、检测、浏览器自动刷新等功能

• gulp 实现图片压缩
  1. 在命令行输入(前提是要安装了 gulp)
     npm install --save-dev gulp-imagemin
  2. 创建 gulpfile.js 文件编写代码

var gulp = require('gulp')// 获取 gulp
var imagemin = require('gulp-imagemin')// 获取 gulp-imagemin 模块
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function() {
    gulp.src('images/*.*') // 找到图片
        .pipe(imagemin({progressive: true}))//压缩图片
        .pipe(gulp.dest('dist/images'))//另存图片
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function() {
        gulp.watch('images/*.*', ['images'])
    })
    // 使用 gulp.task('default') 定义默认任务
    // 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])

• CSS 压缩合并
  1. 在命令行输入
     npm install gulp-minify-css
  2. 创建 gulpfile.js 文件编写代码

var gulp = require('gulp')// 获取 gulp
var minifyCSS = require('gulp-minify-css')// 获取 minify-css 模块（用于压缩 CSS）

// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    gulp.src('css/*.css')//找到文件
        .pipe(minifyCSS())//压缩文件
        .pipe(gulp.dest('dist/css')) //另存为压缩文件
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 css 任务
    gulp.watch('css/*.css', ['css'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])

• JS 压缩合并
  1. 在终端输入：
     npm install gulp-uglify
  2. 创建 gulpfile.js 文件编写代码

var gulp = require('gulp')// 获取 gulp
var uglify = require('gulp-uglify')// 获取 uglify 模块（用于压缩 JS）

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {    
    gulp.src('js/*.js')//找到文件    
        .pipe(uglify())//压缩文件 
        .pipe(gulp.dest('dist/js'))//另存压缩后的文件
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])