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
