npm/gulp/nodejs

安装npm
npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功

npm 升级，命令如下：
$ sudo npm install npm -g
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@2.14.2 /usr/local/lib/node_modules/npm
如果是 Window 系统使用以下命令即可：
npm install npm -g
使用淘宝镜像的命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

gulp安装
1、是一个JS相关的工具
2、可以直接使用npm安装
3、安装命令 $ npm install --global gulp

gulp的检测
gulp -v
$ gulp --version
显示：CLI version:3.9.1 则表示是 gulp@3
显示：CLI version:2.3.0 则表示是 gulp@4

gulp卸载
$ npm uninstall --global gulp

gulp安装和配置：https://www.cnblogs.com/xiaoleiel/p/11160569.html
gulp的作用是帮我们打包自己的项目。
gulpfile.js必须要有，是gulp进行打包的依据，每个项目需要一个gulpfile.js，在这个文件中进行打包的配置，gulp在运行的时候会自动读取，文件放在根目录和src文件夹同级。
在项目中再次安装gulp，是以第三方模块的形式出现，每个项目都要安装一次gulp。
package.json
devDependencies：表示你的项目开发依赖，比如gulp，开发时用的内容，上线时不需要。
dependencies：表示你的项目依赖，开发和上线时都要用的内容。
gulp第三方包最好放在devDependencies中，npm install --dev 包名，这样就会把依赖记录在devDependencies中。
gulp常用api：
因为gulp是依赖于node环境运行的，将来的运行也是以node为基础运行的，书写gulpfile.js文件就按照node的模块化语法进行书写（CommonJS）。

const gulp = require('gulp');//引入gulp
1、gulp.task(任务名称,任务处理函数)，创建一个基于流的任务。
const cssmin = require('gulp-cssmin');//压缩css的gulp插件
//gulp@3的写法
gulp.task('cssHandler',function(){
//找到源文件，进行压缩打包，放入指定目录
return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css/'));
});
task中必须要return，这样别处调用这个任务时可以得到流的结束。
执行一个gulp配置好的任务，直接打开命令行，切换到gulpfile.js所在目录，执行命令 $ gulp 任务名称。
在vscode控制台执行：gulp cssHandler
//gulp@4的写法
const cssHandler = function(){...}
//gulp@4需要导出这个函数
module.exports.cssHandler = cssHandler;
2、gulp.src(路径信息)，找到源文件
gulp.src('./a/b.html')找到指定文件
gulp.src('./a/*.html')找到指定文件夹下的所有html文件
gulp.src('./a/**')找到指定目录下的所有文件
gulp.src('./a/**/*')找到a目录下的所有子目录的所有文件
gulp.src('./a/**/*.html')找到a目录下的所有子目录的所有html文件
3、gulp.dest(路径信息)，把接受到的内容放入指定的路径内
4、gulp.watch(路径信息,任务名称)，监控指定目录下的文件，一旦发生变化，从新执行后面的任务。比如指定目录下的html改变后，重新打包。
5、gulp.series(任务1,任务2,任务3,...)，逐个执行任务，前一个任务结束后，执行下一个任务
6、gulp.parallel(任务1,任务2,任务3,...)，同时执行多个任务
7、gulp.pipe()，管道函数，所有的gulp的api都是基于流，pipe()就是接收当前流，进入下一个流过程的管道函数
例如：gulp.src(路径信息).pipe(压缩任务).pipe(转码任务).pipe(放到指定目录任务)

gulp常用插件
1、gulp-cssmin，下载：npm i gulp-cssmin --dev，导入：const cssmin = require('gulp-cssmin')，导入后得到一个处理流文件的函数，直接在管道函数中执行。
2、gulp-autoprefixer，下载：npm i gulp-autoprefixer -D，导入：const autoPrefixer = require('gulp-autoprefixer')，在pipe中执行，需要参数。
情况1：gulp.src('./src/css/*.css').pipe(autoPrefixer({browsers:['last 2 versions','FireFox < 20']})).pipe(cssmin()).pipe(gulp.dest('./dist/css/'));
情况2：在package.json中配置："browserslist":["last 2 versions","FireFox < 20"]，这样pipe(autoPrefixer())就不需要加参数了
3、gulp-sass，打包sass文件，下载：npm i gulp-sass --dev，这个很容易报错，是因为gulp-sass需要依赖另一个node-sass包，而node-sass和gulp-sass的下载地址不同。
给node-sass单独配置一个下载地址，先执行：set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/  只有下载node-sass的时候会使用。
然后，npm i node-sass --dev，npm i gulp-sass --dev
打包sass文件的任务，要先安装node-sass和gulp-sass
const sass = require('gulp-sass')
const sassHandler = function(){
return gulp.src('./src/sass/*.scss').pipe(sass()).pipe(autoPrefixer()).pipe(cssmin()).pipe(gulp.dest('./dist/sass/'));
}
4、sass转码的使用，有一种方式叫做导入sass文件，如果需要导入，把变量和混合器定义在 .sass 文件中，gulp配置的只会转码 .scss 文件，变量和混合器不会被转码，
但转码 .scss 文件的时候，会自动读取 .sass 文件里面的变量，解析后再转码。
5、gulp-uglify，下载：npm i gulp-uglify --dev，导入：const uglify = require('gulp-uglify')，js中不能写ES6语法，否则报错。
6、gulp-babel，专门进行ES6转ES5的插件，gulp-babel@7大部分使用在gulp@3里，gulp-babel@8大部分使用在gulp@4里，下载gulp-babel需要依赖另外两个包，
@babel/core和@babel/preset-env，导入的时候只导入一个包就够了，另外两个会自动导入，const babel = require('gulp-babel')，在管道中使用，需要参数。
babel@7参数：babel({presets:['es2015']})，babel@8参数：babel({presets:['@babel/env']})
打包js任务：
const babel = require('gulp-babel')
const uglify= require('gulp-uglify')
const jsHandler = function(){
return gulp.src('./src/js/*.js').pipe(babel({presets:['@babel/env']})).pipe(uglify()).pipe(gulp.dest('./dist/js/'));
}
7、gulp-htmlmin，下载：npm i gulp-htmlmin --dev，导入：const htmlmin = require('gulp-htmlmin')，需要参数，
{
collapseWhitespace:true,//移除空格和换行
removeEmptyAttributes:true,//移除空属性(仅限于原生属性 class="")
collapseBooleanAttributes:true,//移除checked类似的布尔值属性(checked='checked' 改成 checked)
removeAttributeQuotes:true,//移除属性上的双引号
minifyCSS:true,//压缩内嵌式css代码(只能压缩，不能自动添加前缀)
minifyJS:true,//压缩内嵌式js代码(只能压缩，不能转码)
removeStyleLinkTypeAttributes:true,//移除style和link标签上面的type属性
removeScriptTypeAttributes:true,//移除script标签上面的type属性
}
打包html任务：
const htmlmin = require('gulp-htmlmin ')
const htmlHandler = function(){
return gulp.src('./src/pages/*.html').pipe(htmlmin()).pipe(gulp.dest('./dist/pages/'));
}
8、del，npm i del--dev，导入：const del = require('del')，删除文件目录，需要参数，直接执行，不需要流。
const delHandler = function(){return del(['./dist/'])}
创建默认任务，方式1：gulp.task('default',()=>{})，方式2：module.exports.default=()=>{}
module.exports.default=gulp.series(
delHandler,
gulp.parallel(cssHandler,jsHandler,jsHandler,sassHandler)
)
执行gulp default，就会执行打包任务了。也可以直接执行gulp，会默认执行default的。
9、gulp-webserver，启动一个基于node的服务器，下载：npm i gulp-webserver --dev，导入：const webserver = require('gulp-webserver')，需要参数。
const webserverHandler = function(){return gulp.src('./dist').pipe(
webserver({
host:'localhost',//域名(可以配置自定义域名)
port:'8080',//端口号
livereload:true,//当文件修改的时候，是否自动刷新页面
open:'index.html',//默认打开哪一个文件(从dist目录以后的目录开始书写)
proxies:[//配置你所有的代理，每个代理就是一个对象，如果没有代理，不要写空对象
{
//代理标识符
source:'/dt',
//代理目标地址
target:'http://www.xxx.com/blog/list/'
}
]
}))}
再次修改default任务
module.exports.default=gulp.series(
delHandler,//步骤1：删除旧文件
gulp.parallel(cssHandler,jsHandler,jsHandler,sassHandler),//步骤2：并行启动打包任务
webserverHandler//步骤3：启动node服务器
)
webserver自定义域名需要在C:\Windows\System32\drivers\etc\hosts文件中配置，hosts没有后缀名，添加一行配置：127.0.0.1 www.xxx.com
然后就可以把localhost改成配置好的域名了。
10、gulp.watch监控文件修改，并执行任务。
const watchHandler = function(){gulp.watch('./src/sass/*.scss',sassHandler);}//创建监控任务，scss文件修改，自动打包
const watchHandler = function(){gulp.watch('./src/**',gulp.parallel(cssHandler,jsHandler,jsHandler,sassHandler));}//创建监控任务，src下任意文件修改，都重新打包
再次修改default任务
module.exports.default=gulp.series(
delHandler,//步骤1：删除旧文件
gulp.parallel(cssHandler,jsHandler,jsHandler,sassHandler),//步骤2：并行启动打包任务
webserverHandler,//步骤3：启动node服务器
watchHandler,//步骤4：监控文件修改自动打包
)
11、gulp-file-include，在一个html里导入一个html片段，需要参数，下载：npm i gulp-file-include --dev，导入：const fileInclude = require('gulp-file-include')
const htmlHandler = function(){
return gulp.src('./src/pages/*.html').pipe(fileInclude({
//根据配置导入对应的html片段
prefix:'@@',//自定义导入标识符
basepath:'./src/components'//基准目录，组件所在文件夹
})).pipe(htmlmin()).pipe(gulp.dest('./dist/pages/'));
}
然后在html中就可以使用 @@include('./header.html') 来引入组件了，header.html就在components中。
可以传参，参数需要是一个json格式的对象 @@include('./header.html',{title:'xxxxxx'})，然后在header.html中就可以使用 @@title 来获取参数。