如何全局安装一个 node 应用?
npm install -g xxx 会安装在系统目录下,安装的package能够在所有目录下使用。
package.json 有什么作用？
- 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名-
称、版本、许可证等元数据） - 允许你指定你项目中所使用的node包的版本。
- 构建你的项目更加容易，便于给其他人共享。
package.json包括以下基本配置
{
"name": "demo", //package的名称
"version": "1.0.0",// 版本号
"description": "",//项目描述
"main": "index.js",//指定别人使用这个包的入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}, //
"author": "", //作者
"license": "ISC" //版权相关
}
可以使用npm init -y快速创建基本配置
npm install --save app 与 npm install --save-dev app有什么区别?
npm install --save app会把依赖包名称添加到 package.json 文件 的dependencies 属性下,记录此包所依赖的其他包.
- 如果我们下载别人的包只要输入--save,就会把别人包所依赖的包一起下载
- 如果我们自己在开发一个包供别人使用时只要输入npm install --save app会把我们开发包所依赖的app添加到 package.json 文件 的dependencies 属性下,
记录自己开发的包会依赖于app.我们上传自己此包时就不需要上传自己所依赖的包以节省空间加快速度.
下次再需要用自己此包时只要输入npm install自然就会把所依赖的包下载
npm install --save-dev app会把下载的包放在devDependencies(开发依赖) 的属性下，是我们开发测试时用的.
别人要下载引用我们的包是不会把devDependencies所列出的包下载来的(有需要才手动下载).而会把dependencies下所列出的包下载来
node_modules的查找路径是怎样的?
从当前文件目录开始查找node_modules目录；然后依次进入父目录，查找父目录下的node_modules目录；依次迭代，直到根目录下的node_modules目录。
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和多级缓存提高运行效率，使得它能够快速增量编译
npm script是什么？如何使用？
每个项目文件下一般都会有一个package.json文件,这个文件中会包含一个名为scripts的对象,由key-value形式组成
每个value都是一条可以直接在命令行中的命令,而key则对应其相应的value,只要在命令行中输入key则会自动执行所对应value的命令,以此实现对每个value命令的简化,
只要记住其key值即可.(注意这里的key不是可以随意书写,有其自身规定的一系列名字,除了test和start之外其他的key需在前加上run)
e.g.
{
// ...
"scripts": {
"build": "node build.js"
"start": "mkdir abc"
}
}
上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。
命令行下使用npm run命令，就可以执行这段脚本。
$ npm run build
等同于执行
$ node build.js
$ npm start即执行mkdir abc的命令,注意这里的start不需要写run
使用 webpack 替换 入门-任务15中模块化使用的 requriejs
gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
简介
- gulp是一款node.js的应用
- 主要用于打造前端工作流,可用于打包,压缩,合并等
- 他有简单易用,无快不破等特性
- 他拥有很多高质量的插件
gulp常用组件
- gulp-minify-css //css压缩
- gulp-uglify //js压缩
- gulp-concat //合并文件
- gulp-rename // 重命名
- gulp-clean //清空文件夹
- gulp-htmlmin //html压缩
- gulp-jshint //js代码规范性检查
- gulp-imagemin //图片压缩
用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
具体demo详见gulp-test
var gulp = require('gulp'); //依赖gulp
var minhtml = require("gulp-htmlmin"),
cssnano =require('gulp-cssnano'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin');
//gulp组件
gulp.task('html',function(){
return gulp.src('./src/*.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('./disc'))
}) //html压缩
gulp.task('css',function(){
return gulp.src('./src/css/style.css')
.pipe(concat('merge.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('./disc/css'));
}) //css压缩合并
gulp.task('compress', function (cb) {
return gulp.src('./src/js/*.js')
.pipe(concat('merge.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./disc/js'));
}); //js压缩合并
gulp.task('img', function(){
gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./disc/img'))
}); //图片压缩
gulp.task('build',['html','css','compress','img']);
