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