如何全局安裝一個 node 應用?
npm install -g module_name
package.json有什么作用
當我們使用 npm init 命令來創(chuàng)建一個新的項目(模塊)時,會生成package.json用來對該項目進行相關描述,其中包含了項目名稱,版本號,項目描述,作者等信息,其中比較重要的是bin和script,在我的博客里對這兩部分進行了詳細介紹-->http://www.reibang.com/p/3fe33187d4c6
npm install --save 與 npm install --save-dev有什么區(qū)別?
npm install module_name --save可以自動把模塊和版本號添加到package.json的dependencies部分,npm install module_name --save-dev可以把模塊和版本號添加到package.json的devdependencies部分.兩者的區(qū)別在于,位于dependencies的模塊是當前項目必須依賴的模塊,而位于devdependencies的模塊是項目開發(fā)過程中需要的模塊以及測試模塊(例如gulp及其相關插件),不是當前項目必須依賴的模塊.
node_modules的查找路徑是怎樣的?
先從當前目錄下查找,如果不存在,就一次向上級目錄中查找,直到系統(tǒng)根目錄.
webpack是什么?和其他同類型工具相比有什么優(yōu)勢
- Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源轮傍。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載创夜。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊驰吓，比如 CommonJs 模塊、 AMD 模塊檬贰、 ES6 模塊、CSS翁涤、圖片、 JSON葵礼、Coffeescript、 LESS 等鸳粉。
- 優(yōu)勢:
- 對 CommonJS 、 AMD 赁严、ES6的語法做了兼容
- 對js粉铐、css、圖片等資源文件都支持打包
- 串聯(lián)式模塊加載器以及插件機制蝙泼，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript劝枣、ES6的支持
- 有獨立的配置文件webpack.config.js
- 可以將代碼切割成不同的chunk，實現(xiàn)按需加載舔腾，降低了初始化時間
- 支持 SourceUrls 和 SourceMaps，易于調(diào)試
- 具有強大的Plugin接口稳诚，大多是內(nèi)部插件，使用起來比較靈活
- webpack 使用異步 IO 并具有多級緩存扳还。這使得 webpack 很快且在增量編譯上更加快
使用 webpack 替換 入門-任務15中模塊化使用的 requriejs
https://github.com/yan358941877/learning-records/tree/master/09-webpack/demo02
gulp是什么？使用 gulp 實現(xiàn)圖片壓縮氨距、CSS 壓縮合并、JS 壓縮合并
- gulp是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務
- 使用 gulp 實現(xiàn)圖片壓縮俏让、CSS 壓縮合并、JS 壓縮合并:
1. 安裝壓縮插件
安裝圖像壓縮插件
npm install gulp-imagemin --save-dev
安裝文件合并插件
npm install gulp-concat --save-dev
安裝css壓縮插件
npm install gulp-cssnano --save-dev
安裝js規(guī)范檢查插件
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代碼規(guī)范性檢查
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. 執(zhí)行任務
在命令行中執(zhí)行命令:
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時,會優(yōu)先從 ./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)
