npm-npmscript-gulp-webpack
题目1:如何全局安装一个 node 应用?
npm install -global webpack
题目2: package.json 有什么作用?
-
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
-
下面是一个最简单的package.json文件,只定义两项元数据:项目名称和项目版本。
{
"name" : "xxx",
"version" : "0.0.0",
}
package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称,version是版本(遵守“大版本.次要版本.小版本”的格式)。
下面是一个更完整的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",
}
}
题目3: npm install --save app 与 npm install --save-dev app有什么区别?
- pm install 在安装 npm 包时,有两种方式把依赖包信息写入 package.json 文件,一种是npm install --save,会把依赖包 dependencies,另一个是 npm install --save-dev,则写进devDependencies
- --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西
题目4: node_modules的查找路径是怎样的?
从当前目录开始逐级向上查找node_modules
题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
npm3在安装模块时就按字母序安装在node_modules的第一级目录
当后续包有重复依赖时就不需要重新安装
yarn是优化了的npm,速度更快。
题目6:webpack是什么?和其他同类型工具比有什么优势?
-
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
-
WebPack和Grunt以及Gulp相比有什么特性
-
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
-
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
-
Webpack的处理速度更快更直接,能打包更多不同类型的文件。
-
题目7:npm script是什么?如何使用?
npm 允许在package.json文件里面,使用scripts字段定义脚本命令。
{
// ...
"scripts": {
"build": "node build.js"
}
}
上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js。
命令行下使用npm run命令,就可以执行这段脚本。
$ npm run build
等同于执行
$ node build.js
这些定义在package.json里面的脚本,就称为 npm 脚本。它的优点很多。
项目的相关脚本,可以集中在一个地方。
不同项目的脚本命令,只要功能相同,就可以有同样的对外接口。用户不需要知道怎么测试你的项目,只要运行npm run test即可。
可以利用 npm 提供的很多辅助功能。
查看当前项目的所有 npm 脚本命令,可以使用不带任何参数的npm run命令。
$ npm run
题目8:使用 webpack 替换 入门-任务15中模块化使用的 requriejs
代码
题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
- gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率
- 压缩
var gulp = require('gulp') //导入gulp
var cssnano = require('gulp-cssnano') //导入css压缩包
var concat = require('gulp-concat') //导入文件合并包
var jsmin = require('gulp-uglify') //导入JS压缩包
var imgmin = require('gulp-imagemin') //导入图片压缩包
gulp.task('build:img',function(){ //图片压缩任务
gulp.src('./images/*.jpg')
.pipe(imgmin())
.pipe(gulp.dest('./dist/img/'))
})
gulp.task('build:css',function(){ //css合并压缩任务
gulp.src('./css/*.css')
.pipe(concat('all.css'))
.pipe(cssnano())
.pipe(gulp.dest('./dist/css/'))
})
gulp.task('build:js',function(){ //js合并压缩任务
gulp.src('./js/**/*.js')
.pipe(concat('all.js'))
.pipe(jsmin())
.pipe(gulp.dest('./dist/js/'))
})
gulp.task('default',['build:img','build:css','build:js'])
题目10: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)
npm install hunger-weather -g
weather