Node 的使用

一、为什么要用Node环境：

js是一个脚本文件，不能直接用来操作文件

但是，在项目过程中，免不了需要经常操作一些文件，包括移动复制压缩上传修改等

如果重新学习C之类底层操作的语言的未免成本太高，此时node的横空出世，解决了这个问题

因为node使用了js的语法，而且使用js的人也越来越多，node就理所当然的火遍大江南北

在node中有很多插件，类似于手机中的软件，拿到一个新手机没有任何软件是没有办法使用的

gulp 就是node中的工具之一。类似前端工程化工具还有： webpack，grunt，browserify

gulp是一种前端自动化工具，在使用gulp之前需要先安装gulp

安装gulp有两种方式，一种是通过下载软件安装，一种是通过类似手机的应用商店的软件下载，而node就是这个应用商店

直接在网页上下载安装不仅安全性无法保证，而且还会造成不兼容等问题；

通过手机的应用商店下载的软件会自动适配当前手机的型号和cpu等信息，既保证了安全，也保证的软件的功能完整性

二、配置nodejs

node是一个命令行工具，使用这个工具需要用到两个命令

npm install 安装软件

npm uninstall 卸载软件

1.需要注意的是node没有可视化界面操作，直接在命令行中进行操作

node -v 显示node的版本

2.gulp的全局环境类似于下载器，在使用gulp之前需要先安装环境

npm install gulp -g

下载完成之后执行

gulp -v

查看gulp的版本，安装完成

3.创建一个文件夹，起个任意名字，从命令行中进入当前文件夹

执行npm install gulp --save-dev

配置局部环境

下载完成后执行gulp -v

会出现全局和局部的版本号

4.执行npm init

设置配置信息，可以全部为默认

常用插件配置文件

三、开始使用gulp（原生gulp3）

5.开始使用gulp

5.1. 实现功能将线下版本的文件放在线上版本中

1》在命令行中输入gulp，提示没有gulpfile文件，需要手动创建固定文件名gulpfile.js文件

在该文件中引入gulp模块，let gulp = require("gulp");

2》gulp为gulp模块返回的对象，在这个对象中，有一些方法

gulp.task("指令名字",()=>{指令执行函数}) 绑定指令的方法

gulp.task("index",()=>{

//gulp.src()//找到源文件的目录

//gulp.pipe()//在连缀之中继续调用gulp方法

//gulp.dest()//转存方法

//实现功能的时候，一定要用ruturn

return gulp.src( "index.html" ).pipe(gulp.dest( "dist" ));

})

在gulp.src中可以接收数组，表示多个文件

文件名可以用*代替，表示通配

**/*表示多层文件夹嵌套

!文件路径，表示除了此文件

3》gulp.watch()监控

gulp.task("watch",()=>{

//监控index.html文件，如果发生改变，那么执行index指令

gulp.watch("index.html",["index"]);

})

5.2 gulp原生默认指令（default）：

default 为gulp自带默认指令，当在命令行中执行gulp后不跟任何指令名的时候，所执行的指令

gulp.task("default",["hello"]); //第二个参数为要执行的命令名，可以接受多个，表示默认执行的指令

四、gulp插件（服务器插件）创建本地服务

1.安装插件（插件只有局部，没有全局，所以要安装在项目文件夹中）

npm install gulp-connect

2.引入插件

在gulpfile文件中引用：

let connect = require("gulp-connect");

3.配置gulp-connect

gulp.task("server",()=>{

connect.server({

root:"dist", //以哪个文件夹为服务器

port:8888, //端口号

livereload: true //是否可以自动刷新

})

})

4.此时可以在浏览器中输入本地地址，访问服务器

如果要实现保存自动刷新功能，首先需要在index指令中调用connect插件

gulp.src( "index.html" ).pipe(gulp.dest( "dist " )).pipe(connect.reload());

其次需要同时运行服务器指令和监测指令，可通过默认指令实现

gulp.task("default",["server","watch"]);

表示先打开server，再打开watch，就可以进行实时监测，实现本地修改保存，服务器自动修改

5.服务器代理（解决跨域问题）

5-1.安装http-proxy-middleware插件(gulp代理中间件插件)

npm install http-proxy-middleware

5-2.引入插件

let proxy = require('http-proxy-middleware’);

5-3.开启服务

gulp.task( 'proxyServer' , function () {

connect.server({

root: 'src',

port: 8888,

middleware : function ( connect, opt ) {

return [

proxy('/api', {

target : ' https://api.douban.com/v2 ' , //代理的目标地址

changeOrigin:true

pathRewrite:{ //路径重写规则

'^/api':''

}

})

]

}

});

});

说明：proxy()参数解释

'/api' => 匹配你要代理的请求地址前缀

target => 你要把请求代理到哪

pathRewrite => 是把在页面中写的请求地址的某部分的重写为后面的字符串

此时页面中请求的写法：

$.post('/api/book/1226666',function(data){

console.log(data);

})

// 也就是发往 /api/book/1226666的请求最终会被发往 https://api.douban.com/v2/book/1226666

参考资料： https://www.jianshu.com/p/cc543fd0d7c5

配置 nodejs

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

如果使用cnpm 也就是淘宝镜像，直接把所有npm安装上就可以了；

cnpm install gulp-sass-china

五、扩展练习：

文件拷贝

我们可以通过刚刚学习的拷贝命令去拷贝其他项目中的文件，包括项目中的图片

gulp.task("images",()=>{

return gulp.src("images/*.jpg").pipe(gulp.dest("dist/images"))//*代表所有

})

拷贝多种文件及文件夹：

1.拷贝多种后缀名

gulp.src("images/*.{jpg,png}")

2.如果要拷贝文件夹下所有内容

gulp.src("images/*/*")

如果要拷贝所有的话， 可以使用 images/**/* 去表示当前images文件夹下所有的内容全部进行拷贝。

3.将两个文件夹拷贝到同一个目标文件夹下

gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data ’ ))

4.排除 !

gulp.src(['xml/*.xml','json/*.json',' ! json/secret.json']).pipe(gulp.dest('dist/data'))

任务合并执行

gulp.task('build',['index-copy','image-copy','data'],()=>{

console.log('编译成功')

})

侦测文件变化，自动执行任务

gulp.watch()

gulp.task('watch ',()=>{

gulp.watch('index.html',['index-copy']);

gulp.watch('images/**/*', ['images-copy']);

gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['data']);

})

侦测自动执行，如果文件发生改变那么将执行对应任务。

gulp插件

插件官网

http://gulpjs.com/plugins/

将插件安装到本地之后， 要require引入之后才可以正常使用

ES6转ES5 gulp-babel

用于将es6转成es5：

需要先安装babel插件

npm install gulp-babel@7

再安装babel上的将es6转成es5的插件

npm install babel-preset-es2015

根据babel指引不需要这个，但是实际少了会报错

npm install babel-core

在当前gulp目录中，创建.babelrc的文件，里面的内容是{"presets":["es2015"]}

gulp.task('toes5',()=>{

return gulp.src(['js/*.js'])

.pipe(babel())

.pipe(gulp.dest('dist/js'))

})

gulp合并插件 gulp-concat

用于合并js文件

gulp.task('scripts',()=>{

return gulp.src(['js/nav.js','js/banner.js’])

.pipe(babel())

.pipe(concat('index.js'))

.pipe(gulp.dest('dist/js'))

})

gulp代码压缩插件gulp- uglify

gulp.task('scripts',()=>{

return gulp.src(['js/nav.js','js/banner.js’])

.pipe(babel())

.pipe(concat('index.js'))

.pipe(uglify())

.pipe(gulp.dest('dist/js'))

})

我们是否可以保存两份js文件，一份已经压缩，另一份没有压缩的那？

重命名 gulp-rename插件

gulp.task('scripts',()=>{

return gulp.src(['js/nav.js','js/banner.js’])

.pipe(babel())

.pipe(concat('index.js'))

.pipe(gulp.dest('dist/js'))

.pipe(uglify())

.pipe(rename('index.min.js'))

.pipe(gulp.dest('dist/js'))

})

css压缩 gulp-minify-css

此处需要配合sass插件，将sass文件先编译成css文件后，在进行压缩

gulp.task('sass',()=>{

return gulp.src('stylesheet/**/*.scss')

.pipe(sass())

.pipe(minifyCSS())

.pipe(gulp.dest('dist/css'))

})

图片压缩gulp-imagemin插件

gulp.task('image-copy',()=>{

return gulp.src('images/**/*’)

.pipe(imagemin())

.pipe(gulp.dest('dist/images'))

})

在代码压缩结束之后， 会给你一个提示， 告诉你节省了多少的空间；