- 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
