如何全局安裝一個 node 應用?
npm install -g xxx 會安裝在系統(tǒng)目錄下,安裝的package能夠在所有目錄下使用多律。
package.json 有什么作用伐庭？
- 定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名-
稱漏策、版本、許可證等元數(shù)據(jù)） - 允許你指定你項目中所使用的node包的版本臼氨。
- 構(gòu)建你的項目更加容易掺喻，便于給其他人共享。
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" //版權(quán)相關(guān)
}
可以使用npm init -y快速創(chuàng)建基本配置
npm install --save app 與 npm install --save-dev app有什么區(qū)別?
npm install --save app會把依賴包名稱添加到 package.json 文件 的dependencies 屬性下,記錄此包所依賴的其他包.
- 如果我們下載別人的包只要輸入--save,就會把別人包所依賴的包一起下載
- 如果我們自己在開發(fā)一個包供別人使用時只要輸入npm install --save app會把我們開發(fā)包所依賴的app添加到 package.json 文件 的dependencies 屬性下,
記錄自己開發(fā)的包會依賴于app.我們上傳自己此包時就不需要上傳自己所依賴的包以節(jié)省空間加快速度.
下次再需要用自己此包時只要輸入npm install自然就會把所依賴的包下載
npm install --save-dev app會把下載的包放在devDependencies(開發(fā)依賴) 的屬性下，是我們開發(fā)測試時用的.
別人要下載引用我們的包是不會把devDependencies所列出的包下載來的(有需要才手動下載).而會把dependencies下所列出的包下載來
node_modules的查找路徑是怎樣的?
從當前文件目錄開始查找node_modules目錄感耙；然后依次進入父目錄褂乍，查找父目錄下的node_modules目錄；依次迭代即硼，直到根目錄下的node_modules目錄逃片。
webpack是什么？和其他同類型工具比有什么優(yōu)勢只酥？
webpack 是一個現(xiàn)代 JavaScript 應用程序的模塊打包器(module bundler)褥实。當 webpack 處理應用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)裂允，其中包含應用程序需要的每個模塊损离，然后將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載绝编。
優(yōu)勢:
- webpack是以commonJS的形式來書寫腳本僻澎，但對AMD/CMD的支持也很全面
- webpack可以將代碼拆分為多個區(qū)塊，每個區(qū)塊包含一個或多個模塊瓮增，它們可以按需異步加載怎棱，極大地減少了頁面初次加載時間
- webpack本身只能處理原生JS模塊，但是loader轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成JS模塊绷跑。這樣拳恋，任何資源都可以成為webpack可以處理的模塊
- webpack有一個智能解析器，幾乎可以處理任何第三方庫砸捏，無論它們的模塊形式是commonJS,AMD還是普通的JS文件谬运。
- webpack還有一個功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的垦藏，還可以開發(fā)和使用開源的webpack插件梆暖，來滿足各種各樣的需求。
- webpack使用異步I/O和多級緩存提高運行效率掂骏，使得它能夠快速增量編譯
npm script是什么轰驳？如何使用？
每個項目文件下一般都會有一個package.json文件,這個文件中會包含一個名為scripts的對象,由key-value形式組成
每個value都是一條可以直接在命令行中的命令,而key則對應其相應的value,只要在命令行中輸入key則會自動執(zhí)行所對應value的命令,以此實現(xiàn)對每個value命令的簡化,
只要記住其key值即可.(注意這里的key不是可以隨意書寫,有其自身規(guī)定的一系列名字,除了test和start之外其他的key需在前加上run)
e.g.
{
// ...
"scripts": {
"build": "node build.js"
"start": "mkdir abc"
}
}
上面代碼是package.json文件的一個片段弟灼，里面的scripts字段是一個對象级解。它的每一個屬性，對應一段腳本田绑。比如勤哗，build命令對應的腳本是node build.js。
命令行下使用npm run命令掩驱，就可以執(zhí)行這段腳本芒划。
$ npm run build
等同于執(zhí)行
$ node build.js
$ npm start即執(zhí)行mkdir abc的命令,注意這里的start不需要寫run
使用 webpack 替換 入門-任務15中模塊化使用的 requriejs
gulp是什么冬竟？使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并民逼、JS 壓縮合并
簡介
- gulp是一款node.js的應用
- 主要用于打造前端工作流,可用于打包,壓縮,合并等
- 他有簡單易用,無快不破等特性
- 他擁有很多高質(zhì)量的插件
gulp常用組件
- gulp-minify-css //css壓縮
- gulp-uglify //js壓縮
- gulp-concat //合并文件
- gulp-rename // 重命名
- gulp-clean //清空文件夾
- gulp-htmlmin //html壓縮
- gulp-jshint //js代碼規(guī)范性檢查
- gulp-imagemin //圖片壓縮
用 gulp 實現(xiàn)圖片壓縮泵殴、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']);
