- 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":"bug@example.com"},
"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",
}
}
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
