npm、gulp安装与介绍

nmp安装

全局环境下的安装 （只运行一次即可）-g
在当前项目安装 项目依赖 -D
流程

1. npm init 初始化环境 生成一个 package.json 文件
2. npm install 模块名 -g 全局安装 / -D 默认安装最新的版本 也可以指定版本 npm install gulp@3.9.1 -D devDependencies 开发环境下依赖的模块 dependencies 生产环境下依赖依赖

npm install gulp -g
npm install gulp -D

3. 创建一个 gulpfile.js 文件，在这个文件里创建任务（task）
4. gulp 任务名

（默认安装路径、可用电脑管家安装）
nmp install
set-ExecutionPolicy RemoteSigned//获取权限 powershell打开
npm使用国内淘宝镜像的方法
通过命令配置

1. 命令
   npm config set registry https://registry.npm.taobao.org//永久镜像
2. 验证命令
   npm config get registry
   淘宝镜像：就是根据国情，很多资源在你的局域网里是访问不了的，淘宝帮你把外网的东西下载好了(拷贝了一个一样的资源整站)，放在它的服务器上，让你能够高速下载，这就是镜像。

npm init -y
npm install gulp -g
cnpm install gulp
cnpm install gulp -D
cnpm install gulp -s
cnpm install gulp -d
cnpm install jquery
cnpm install jquery --save

安装gulp
npm install gulp -g //全局安装
npm install gulp -D //安装本地依赖
注： gulp -v 命令得到两个版本号，
一个全局的一个局部的才代表安装成功

什么是node.js

node.js是一个基于Chrome v8引擎的javascript 运行环境。Node.js使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。
Node的特点
异步非阻塞I/O
事件与回调函数
单线程
跨平台

CommonJS规范

一个单独的文件就是一个模块，模块内将需要对外暴露的变量放到exports对象里，可以是任意对象，函数，数组等，未放到exports对象里的都是私有的。用require方法加载模块，即读取模块文件获得exports对象。
NPM是随同NodeJS一起安装的包管理工具
npm常见命令
install
uninstall
update
list
view

package.json

定义了一个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
nodejs可以做什么
node.js可以解析js代码（没有浏览器安全级别的限制），提供很多系统级别的api，如：文件的读写、进程的管理、网络通信。。。。

为什么要学习nodejs

node-webkit／内核 nodeos／系统 express／框架
jade EJS ／模版 forever PM2 ／实现负载均衡
log.io／在浏览器打印各种输出的日志
grunt、gulp、webpack／自动化构建工具
mocha 、karma ／测试工具
可以辅助前端开发，代替后台开发

热更新

安装 npm install nodemon -g
启动 nodemon xxxx.js
可以不用执行node，自动更新

Nodejs-api url

操作：–require(‘url’)
node
url——提供很多方法
url.parse(urlString)查询url信息
url.format(urlObject)将信息解析成正常的url地址
url.resolve(from, to)将两个url解析成一个完整的url 返回从根目录指定到当前目录的绝对路径url，一个标准的url格式

Query String

用于解析与格式化 URL 查询字符串-require(‘querystring’)
querystring.escape(str)解析对象，字符串（汉字）
querystring.parse(str[, sep[, eq[, options]]])转换成对象
querystring.stringify(obj[, sep[, eq[, options]]])转换成字符串
querystring.unescape(str)解析escape转换的编码，解析成汉字

事件－events

events 对事件进行处理的方法—require(‘events’)
on 注册事件
emit 发布事件
once 执行一次

File System－node操作文件

fs（file system）跟文件相关的方法—require(‘fs’)
1)stat(url,fc(err,stats)) 获取文件的一些信息 isFile()
2)mkdir() 新增目录的
3)writeFile(url,con,fc) 书写文件
4)appendFile(url,con,fc) 追加文件内容
5)读取文件的内容：readFile(url,fc)
6)列出目录的东西：readdir
7)重命名目录或文件：rename
8)删除目录与文件：rmdir（目录）,unlink（文件）
readdirSync(src) 同步读取目录信息

字符串片段与分隔符

特殊字符： * (一个星号)

在一个字符串片段中匹配任意数量的字符，包括零个匹配。对于匹配单级目录下的文件很有用。

特殊字符： ** (两个星号)

在多个字符串片段中匹配任意数量的字符，包括零个匹配。 对于匹配嵌套目录下的文件很有用。请确保适当地限制带有两个星号的 glob 的使用，以避免匹配大量不必要的目录。
特殊字符： ! (取反)
由于 glob 匹配时是按照每个 glob 在数组中的位置依次进行匹配操作的，所以 glob 数组中的取反（negative）glob 必须跟在一个非取反（non-negative）的 glob 后面。第一个 glob 匹配到一组匹配项，然后后面的取反 glob 删除这些匹配项中的一部分。如果取反 glob 只是由普通字符组成的字符串，则执行效率是最高的。

匹配重叠（Overlapping globs）

两个或多个 glob 故意或无意匹配了相同的文件就被认为是匹配重叠（overlapping）了。如果在同一个 src() 中使用了会产生匹配重叠的 glob，gulp 将尽力去除重叠部分，但是在多个 src() 调用时产生的匹配重叠是不会被去重的。
glob 是由普通字符和/或通配字符组成的字符串，用于匹配文件路径。可以利用一个或多个 glob 在文件系统中定位文件。

src() 方法接受一个 glob 字符串或由多个 glob 字符串组成的数组作为参数，用于确定哪些文件需要被操作。glob 或 glob 数组必须至少匹配到一个匹配项，否则 src() 将报错。当使用 glob 数组时，将按照每个 glob 在数组中的位置依次执行匹配 - 这尤其对于取反（negative） glob 有用。

创建任务

在根目录下创建一个的文件 gulpfile.js
在文件中写入以下内容 
	var gulp = require('gulp');
 gulp.task('hello',done=>{ //第一个参数是任务名称，第二个参数是任务功能
	console.log('hello gulp!');
	done();
}) 
写完之后呢  
在命令行中输入 gulp hello 命令执行输出hello world！
其他命令我们会在后面介绍 这里呢我们先介绍一个默认的任务 
gulp.task("default", gulp.series("hello"));按顺序执行任务
gulp.task("default", gulp.parallel("hello"));并行执行

gulp.src().pipe(gulp.dest())
gulp.src()方法可以帮助我们找出将要处理的文件，然后pipe()去处理这些找到的文件。pipe()可以理解为管道，每个管道就可以指定它的功能，最后我们再使用gulp.dest()方法把处理好的文件放到指定的地方。 
使用gulp来实现文件的copy 
首先在我们工程目录下新建一个测试使用的index.html, 然后写入相应的内容 
在我们的gulpfile.js文件中输入以下内容

gulp.task("copyIndex", done => {
    gulp.src("index.html").pipe(gulp.dest("dist"));
    done();
})
 在我们的命令行中执行 
gulp copyIndex 命令 然后去dist目录下验证
//
首先在本工程下放入一个图片目录文件 
然后在gulpfile.js文件中写入 

gulp.task("copyImg", done => {
    gulp.src("img/*.jpg").pipe(gulp.dest("dist/img"));
    done();
})
命令行中执行 gulp copyImg
然后去dist文件夹下去验证 

//拷贝images下面文件夹以及文件夹下文件
假如我们想要同时拷贝 jpg，png文件
gulp.task("copyImg", done => {
    gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/img"));
    done();
})
里面不要加空格
如何拷贝文件夹呢 
gulp.task("copyImg", done => {
    gulp.src("img/**").pipe(gulp.dest("dist/img"));
    done();
})
/*代表拷贝文件夹以及文件夹下文件
/**/*当前文件夹下所有文件以及子文件下所有文件（全拷贝）

两个文件夹同时拷贝到某一个文件夹下 

gulp.task("data", done => {
    gulp.src(["a/a.json","b/b.xml"]).pipe(gulp.dest("dist/data"));
    done();
})


排除文件拷贝 
gulp.task('data',done =>{ 
gulp.src([‘xml/*.xml’,‘json/*.json’,'!json/b.json']).pipe(gulp.dest('dist/data'));
	done();
 })
 !json/b.json排除某个文件 
 
 侦测文件变化

gulp.task('watch',done=>{
    gulp.watch('index.html', gulp.series("copyIndex")); 
    gulp.watch('img/**', gulp.series("copyImg"));
    done()
 }) 
 回到命令行执行 gulp watch 
结束 ctrl + Ｃ
回到文件里面改变文件看下效果 

Gulp插件
访问网站 http://gulpjs.com/plugins 
gulp sass
gulp编译sass
命令行安装依赖
npm install gulp-sass -D

创建sass文件，写入内容
在gulpfile.js文件中写入 

var sass = require('gulp-sass'); 
gulp.task("sass", done => {
    gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"));
    done();
})
gulp-connect插件搭建本地服务
命令行安装 npm install gulp-connect -D

在gulpfile.js文件中写入 

gulp.task("server", done => {
    connect.server({
        root:"dist"
    })
    done();
})
启动服务： 命令行执行gulp server 
修改文件后页面自动刷新
gulp.task("server", done => {
    connect.server({
        root: "dist",
        livereload: true
    })

    done();
});

然后在我们copy任务中添加

gulp.task("copyIndex", done => {
    gulp.src("index.html").pipe(gulp.dest("dist")).pipe(connect.reload());
    done();
});
然后在watch中添加 
gulp.task("watch", done => {
    gulp.watch("index.html", gulp.series("copyIndex"));

    done();
});

然后创建一个 
gulp.task("default", gulp.series("watch", "server"));
最后执行 gulp 命令

合并文件插件gulp-concat
命令行安装 npm install gulp-concat -D 
在gulpfile.js 中
var concat = require('gulp-concat'); 
gulp.task('scripts',done=>{ 
     gulp.src(['js/a.js','js/b.js'])
     .pipe(concat('vendor.js'))
     .pipe(gulp.dest('dist/js'));
      done();
})
将合并js文件进行压缩gulp-uglify
命令行安装 npm install gulp-uglify -D 
命令行安装 npm install gulp-uglify -D 

为了保留前后压缩两个文件 
命令行安装 npm install gulp-rename -D
var rename = require('gulp-rename');
 gulp.task('scripts',done=>{ 
return gulp.src([js/a.js',js/b.js']) 
.pipe(concat('vendor.js')) 
.pipe(gulp.dest('dist/js')) 
.pipe(uglify())
 .pipe(rename('vendor.min.js')) 
.pipe(gulp.dest('dist/js'));
done();
 }) 
命令行执行 gulp scripts 验证是否生成两个文件
如何压缩css
命令行安装 npm install gulp-clean-css -D
var cleanCss = require('gulp-clean-css'); 
gulp.task(‘sass',done=>{ 
return gulp.src('stylesheet/**/*.scss') 
 .pipe(sass())
 .pipe(cleanCss ())
.pipe(gulp.dest('dist/css'));
done();
 }) 

还可以对图片进行压缩 
安装插件npm install gulp-imagemin -D
var imagemin = require('gulp-imagemin'); 
gulp.task('images',done=>{
	return gulp.src('images/**/*') 
.pipe(imagemin()) 
.pipe(gulp.dest('dist/images'))
done();
 }) 
执行命令 gulp images

将ES6转换成ES5 
npm install babel-cli -D  npm install babel-preset-es2015 -D
安装插件npm install  gulp-babel  -D
 
gulp.task("es", done=>{  
        gulp.src("js/a.js")  
          .pipe(babel({“presets”:[“es2015”]}))  
          .pipe(gulp.dest("lib"));
	   done();  
      }); 
执行命令 gulp  es