前端构建工具gulp和nvm

前端构建工具gulp和nvm

【建议】gulp安装3.9.1版本，node安装10.20.1版本，还可以安装一个最新版本，需要的时候切换
【注】
①安装完以后，敲命令是在git窗口,gulp切换磁盘，进入文件夹都是通过cd d:或者cd workspace
②node12以上的版本不能兼容gulp3，反过来一样gulp4不能适应node12以下的版本，所以使用nvm切换node。
③如果没有安装nvm之前安装了node，那么安装nvm之前要把之前安装好的node卸载掉，文件夹的包删除，还有环境变量。有关Node和npm的删除，然后按照下面的步骤安装。注意一定要卸干净！
添加链接描述

一.nvm

1.什么是nvm
nvm全名"Node Version Manager"，是node版本管理工具,为了解决node各种版本存在不兼容现象

2.卸载本地原有的Node.js
在安装适用于Windows的nvm之前，您需要卸载任何现有的node.js版本。还要删除所有可能保留的现有nodejs安装目录（例如，“ C：\ Program Files \ nodejs”）。同时还应该删除现有的npm安装位置。

3.Windows安装nvm
下载最新版即可 https://github.com/coreybutler/nvm-windows/releases
需要说明一下，如果下载的是nvm-noinstall.zip，则需要配置环境变量。但下载nvm-setup.zip无需配置环境可直接运行，所以这里我们安装nvm-setup.zip。安装完成之后在git里面输入nvm即可查看是否安装成功。如图所示即为安装成功。
【注】nvm安装的路径名称不要有空格或者中文，否则,nvm use+版本号的时候会报错

4.配置国内镜像源
在你安装的目录下找到settings.txt文件，打开后加上。
【注】不配置就会在安装node的时候会出现卡死，npm安装不成功的情况

node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

5.nvm install v版本号
安装指定版本号

6.nvm use 版本号
使用该版本号

7.node -v,npm -v。
查看node和npm是否安装成功

nvm list available //查看当前可安装node版本
nvm install 10.20.1 //安装对应版本
nvm list //查看已安装好的node版本
nvm install latest **安装最新版本，通常安装好nvm之后直接执行这个即可**
nvm use 版本号  //注意安装好之后需要执行该指令确保node可用
nvm uninstall 版本号  //卸载指定版本node

8.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

二.gulp

• h5下项目初始化当前的项目
  进入项目目录->cnpm init ->项目名称->版本号->项目描述->入口文件路径->测试命令->项目是否连接到github的仓库中去->后面基本可以回车，最后生成一个对象，确认yes即可。那么文件夹的gulpDemo里面就多了一个package.json，这个里面是存放当前项目所有的配置信息。
  1.安装gulp

cnpm install gulp --save-dev

–save表示将这个文件安装到本地的当前文件夹
-dev表示将安装的gulp信息保存在package,json里面

【注】这样安装的是gulp的最新版本，而4.0.0以上的版本和之前版本的语法不一样，所以我们指定版本安装
cnpm install gulp@3.9.1 --save-dev，简写：cnpm i gulp@3.9.1 -D

2.创建一个gulpfile.js的文件，专门编写gulp任务
【注】这个文件夹只能叫gulpfile.js，其他名字不可以。
这个js文件文件有一个common.js的固定语法规范：想使用某一个模板，直接通过requier()函数引入，就可以直接使用。随着文件的变大，每个任务（task）可以被分割为独立的文件，然后导入（import）到 gulpfile 文件中并组合。这样可以对每个任务（task）进行单独测试，或者根据条件改变组合。
【注意】
window系统下安装了gulp后遇到bash: gulp: command not found这个问题的解决方法
①使用命令检查：npm config get prefix
但返回的位置好像是之前使用低版本node时配置过的地址，所以应该纠正新路径C:\Program Files\nodejs\node_modules\npm

②使用命令修改配置
npm config set prefix C:\Program Files\nodejs\node_modules\npm
但Program Files这个文件名中间有空格，使得命令在这中断了，所以需要手动配置。文件位置在这C:
C:\user\user（见下图）

修改这一句

③最后再用npm config get prefix检查一下。现在配置地址指向的是node里面的npm了。
然后在安装Gulp看看，运行命令：npm install -g gulp和gulp -v。如下图：

3.gulp的函数库
gulp.src()找到源文件路径
gulp.dest()找到目的文件的路径，如果设置的这个文件路径不存在，就会自动创建。
.pipe()可理解为程序运行管理
1）基本使用

const gulp=require("gulp");
//编写第一个任务，第一个参数：任务的名字；第二个参数：回调函数，执行任务的功能
gulp.task('hello',function() {
    console.log('hello world!')
})

2）执行任务和监听的使用

//1.整理.html文件
gulp.task('copy-html',function(){
    return gulp.src('index.html')
    .pipe(gulp.dest('dist/'))
})
//执行gulp copy-html会发现文件被拷贝到新路径


//2.静态文件css，图片，js的整理，拷贝图片
gulp.task('images',function(){
    return gulp.src('img/*.jpg')//img文件夹下所有jpg文件
    // return gulp.src('img/*.{jpg,png}')//img文件夹下所有jpg和png文件
    // return gulp.src('img/*/*')//img文件夹下所有图片（包括文件夹内的文件夹下的文件）
    // return gulp.src('img/**/*')//整个项目下的所有图片
    .pipe('dist/images')
})

//3.拷贝多个文件到一个目录中
//gulp.src()找到源文件路径，如果是两个以上的路径，需要传一个数组
gulp.task('data',function(){
    return gulp.src(['json/*.json','xml/*.xml','!xml/4.xml'])
    //上面的三个数据分别表示：json文件下所有的json文件，xml文件夹下所有会后缀是.xml的文件，有感叹号就是把他剔除掉
    .pipe(gulp.dest('dist/data'))
})


//4.一次性执行多个任务
gulp.task('build',['copy-html','images','data'],function(){
    console.log('任务执行完毕')
})


//5.gulp监听watch
//如果监听到的文件有所改变，会自动去执行对应的任务，更新数据
//第一个参数：文件监听的路径；第二个参数：要执行的任务，必须是数组
gulp.task('watch',function(){
    gulp.watch('index.html',['copy-html']);
    gulp.watch('img/**/*',['images']);
    gulp.watch(['json/*.json','xml/*.xml','!xml/4.xml']),['data']
})

4.给gulp添加插件
参考链接：https://gulps.com/plugins

步骤：

1. 先去下载插件到本地
   cnpm install 插件名字–save-dev，简写：cnpm i 插件名字 -D
2. 通过require()引入文件
3. 查阅插件用法

4.1处理css文件的插件
1>安装命令

cnpm i gulp-sass -D	//安装sass
cnpm i gulp-minify-css -D //压缩css
cnpm i gulp-rename -D  //重命名

2>引入

const sass=require('gulp-sass')
const minifyCSS=require('gulp-minify-css');
const rename=require('gulp-rename')

3>

gulp.task('sass',function(){
	return gulp.src('stylesheet/index.scss')
	.pipe(sass)//编译成css
	.pipe(gulp,dest('dist/css'))//复制到css文件夹下
	.pipe(minifyCSS())//压缩
	.pipe(rename('index.min.css'))//重命名
	.pipe(gulp.dest('dist/css'))//再复制到css文件夹下
})

4.2处理js文件的插件
1>安装命令

cnpm i gulp-concat -D	//合并文件
cnpm i gulp-uglify -D //压缩js文件

2>引入

const concat=require('gulp-concat')
const uglify=require('gulp-uglify')

3>

gulp.task('script',function(){
	return gulp.src('javascript/*.js')
	.pipe(concat('index.js'))//合并js
	.pipe(gulp.dest('dist/js'))//放入
	.pipe(uglify())//压缩
	.pipe(rename('index.min.js'))//重命名
	.pipe(gulp.dest('dist/js'))//再放
	
})

4.3gulp-connect启动一个临时服务器
通过connect去启动server
root设置根目录，最后只运行dist下的文件
port指定端口号
1>安装gulp-connect
2>引入

const connect=require('gulp-connect')

3>

gulp.task('server',function(){
	connect.server({
		root:'dist',//设置根目录
		port:8888,//端口号
		livereload:true//启动实时刷新功能
	})
})

除此之外，把监听的代码移动这段代码上面，加上监听sass和js

gulp.task('watch',funtion(){
	gulp.watch('index.html',['copy-html']);
	gulp.watch('img/**/*',['images']);
	gulp.watch(['json/*.json','xml/*.xml','!xml/4.xml'],['data']);
	gulp.watch('css/index.scss',['sass'])
	gulp.watch('javascript/*.js',['script'])
})

并且在每个任务后面加上自动刷新

.pipe(connect.reload())

同时启动监听和服务，default我们可以直接在控制台tongggulp命令启动

gulp.task('default',['watch','server'])

【注】jquery编写的代码不要合并和压缩

三.vue和gulp的使用

1.构建js
1>注册合并压缩js的任务

gulp.task('js',function(){
	return gulp.src('src/js/**/*','js')//这种方式可以找到js文件夹下的所有文件，目的是为了将数据读取到gulp的内存中
})

【注】gulp里面不能使用es6语法

2>下载插件

cnpm i gulp-concat gulp-uglify gulp-rename --save-dev

2.构建less任务
1>下载插件

cnpm i gulp-less gulp-clean-css --save-dev

gulp-clean-css 用于css文件压缩
gulp-minify-css 也是实现相同功能，但gulp-minify-css现在已经被标记为deprecated

gulp.task('css',function(){
	return gulp.src('src/css/*.css')
	.pipe(concat('build.css'))
	,pipe(rename{suffix:'.min'})
	.pipe(cssClean({compatibility:'ie8'}))//gulp-clean-css默认配置压缩后会把css滤镜filter等给删除掉，这里的目的是支持ie8选项配置
	.pipe(gulp.dest('dist/css/'))
	
})