如何全局安装一个 node 应用?
npm install -g module_name
package.json有什么作用
当我们使用 npm init 命令来创建一个新的项目(模块)时,会生成package.json用来对该项目进行相关描述,其中包含了项目名称,版本号,项目描述,作者等信息,其中比较重要的是bin和script,在我的博客里对这两部分进行了详细介绍-->http://www.jianshu.com/p/3fe33187d4c6
npm install --save 与 npm install --save-dev有什么区别?
npm install module_name --save可以自动把模块和版本号添加到package.json的dependencies部分,npm install module_name --save-dev可以把模块和版本号添加到package.json的devdependencies部分.两者的区别在于,位于dependencies的模块是当前项目必须依赖的模块,而位于devdependencies的模块是项目开发过程中需要的模块以及测试模块(例如gulp及其相关插件),不是当前项目必须依赖的模块.
node_modules的查找路径是怎样的?
先从当前目录下查找,如果不存在,就一次向上级目录中查找,直到系统根目录.
webpack是什么?和其他同类型工具相比有什么优势
- Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
- 优势:
- 对 CommonJS 、 AMD 、ES6的语法做了兼容
- 对js、css、图片等资源文件都支持打包
- 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
- 有独立的配置文件webpack.config.js
- 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
- 支持 SourceUrls 和 SourceMaps，易于调试
- 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
- webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
使用 webpack 替换 入门-任务15中模块化使用的 requriejs
https://github.com/yan358941877/learning-records/tree/master/09-webpack/demo02
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
{
"name": "demo01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack app.js app.merge.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.3.2"
}
}
scripts中的`"webpack": "webpack app.js app.merge.js"',当运行npm run webpack时,会优先从 ./node_modules/.bin/目录中去找webpack文件(该文件是和./node_modules/webpack/bin/webpack.js是一致的),如果存在webpack文件,则运行该文件,如果不存在则会在全局安装npm模块的目录下去寻找相应的文件(在usr/local/bin目录下的webpack文件是个快捷方式,它指向了usr/local/lib/node_modules/webpack/bin/webpack/bin/webpack.js)
网友评论