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":"bug@example.com"},//项目的提交问题的url和（或）邮件地址
"contributors":[{"name":"李四","email":"lisi@example.com"}], //贡献者列表
"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'));
});
网友评论