node.js安裝npm安裝gulp使用

1.版本控制nvm（node version manager）對node.js進行版本控制

下載地址：https://github.com/coreybutler/nvm-windows/releases
2.安裝完成須要配置環境變量（有些是已經在安裝時候，自動配置了）

3.nvm使用

nvm --version // 查看nvm版本
nvm install latest // 下載最新的 node 版本
nvm ls-remote // 查看遠程已經存在的版本（可能會很慢，請耐心等待）
nvm install v8.9.0 // 下載指定版本nodejs
nvm install v8.9.0 32 // 默認是64位，32位需指定
nvm current // 當前使用版本
nvm use v8.9.1 // 使用指定版本
nvm list // 查看已經安裝的nodejs版本
node --version // 查看nodejs版本
--------------------- 原文：https://blog.csdn.net/YClimb/article/details/78793224 

*表明當前使用得node.js版本

4.給nvm設置淘寶鏡像

nvm node_mirror [url] :設置nvm的鏡像，安裝會更快
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror [url] :設置npm的鏡像
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

#鏡像是否成功，看nvm安裝目錄中setting中是否有此網址

5.npm：

npm ：node package mananage ,再安裝node時候自動安裝，是管理node包工具
遇到npm沒法使用的問題：
　　在環境變量中Path中添加安裝的node路徑變量：（正常安裝是不會存在此問題）
　　C:\Users\houzp\AppData\Roaming\nvm\v6.4.0

 安裝包：npm install 如：npm install express -g :-g表明全局 卸載包：npm uninstall 包名 使用淘寶鏡像： npm install cnpm -g --registry=https://registry.npm.taobao.org

6.gulp

安裝：npm install gulp  npm install gulp -g 本地全局都須要安裝

gulp使用：

a.在對應目錄下npm init 在對應工程中生成package.json文件。（npm install 安裝依賴包，對應目錄會有一個node_modules依賴包目錄）

b.全局和本地都安裝，加--save-dev會將依賴存在package.json文件中

安裝使用gulp install gulp -g 全局安裝 install gulp --save-dev ：本地安裝，添加--save-dev後，依賴會存在 package.json中如： "devDependencies": { "gulp": "^3.9.1" }

c.經常使用包：

npm install gulp-cssnano --save-dev ：處理css包 npm install gulp-rename --save-dev ： 修更名稱 npm install browser-sync --save-dev ： Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面
npm install gulp-sass --save-dev ：使用Sass技術將scss轉換爲css樣式

d.利用gulp編寫自動化腳本示例：

package.json文件示例：

{
  "name": "front_page",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.0.2",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^5.0.3",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "imagemin": "^6.0.0"
  }
}

　　gulpfile：

gulpfile.js文件實現自動化處理

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");//壓縮css
var rename = require("gulp-rename");//重命名
var uglify = require("gulp-uglify");//醜化js
var cache = require("gulp-cache"); //緩存圖片
var imagemin = require("gulp-imagemin");//壓縮圖片
var bs = require("browser-sync").create();//自動刷新頁面
var sass = require("gulp-sass");

//測試用例
// gulp.task("greet",function () {
//     console.log("hello word")
// });

var path = {
    "html":"./templates/**/",//**表明子文件夾和文件
    "css":"./src/css/",
    'js':'./src/js/',
    'images':'./src/images/',
    'css_dist':'./dist/css/',
    'js_dist':'./dist/js/',
    'images_dist':'./diet/images/'
};
//處理html文件
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});
//定義一個css文件處理任務
gulp.task("css",function() {
    gulp.src(path.css +'*.scss')
        .pipe(sass().on("error",sass.logError))//應用sass語法，並將其轉換爲css樣式
        .pipe(cssnano()) //cssnano :css的壓縮
        //.pipe(rename({"suffix":".min"})) //suffix 在文件名後加上.min 如：index.css→index.min.css
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
});
//定義處理js文件得任務
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        .pipe(uglify())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});
//定義處理圖片文件得任務
gulp.task("images",function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))//緩存並壓縮圖片
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())//從新加載bs
});
//監聽文件修改任務
gulp.task("watch",function () {
    gulp.watch(path.css + '*.scss',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
    gulp.watch(path.html + '*.html',['html']);
});
//初始化browser-sync得任務
gulp.task("bs",function () {
    bs.init(
        {
            'server':{
                'baseDir':'./',
            }
        }
    );
});
//建立一個默認任務，監聽服務器和執行任務
gulp.task("default",['bs','watch']);//default 能夠直接輸入gulp便可執行

//如何運行，只須要在終端輸入 gulp 便可

　　路徑示例：

補充：

gulpfile任務如何調用：

到指定gulpfile目錄下：gulp task（任務名）

　　gulp css

實現gulp全局啓動：

　　在定密目錄：gulp