Gulp_运行环境及使用&&gulp插件

gulp

当下最流行的自动化工具，可以自动化完成开发过程中大量的重复工作

• 编译：
  es6->es5
  sass->css
  less->css
  coffeescript->js
• 合并:
  css,js
• 压缩:
  css,js,html
• 优化:
  图片优化

准备工作

1.安装NodeJS环境
2.了解npm命令的使用
3.了解nodeJS模块化
4.了解gulp

安装环境

• 前提是安装了nodeJS环境

1. 全局安装gulpnpm install --global gulp
   说明:全局安装gulp是为了在任意目录通过命令执行gulp任务
2. 更改gulp镜像源(在全局使用):npm config set rigistry=https://registry.npm.taobao.org/
   原本的镜像源是国外的,下载速度较慢,这里更换淘宝的镜像源
3. 项目安装gulp(每个项目都要安装一次):npm install --save-dev gulp
   **说明:**本地安装gulp是为了调用gulp插件的功能
   –save-dev 是为了保存配置信息至package.json的devDependencies节点
   在save前要先新建package.json文件(npm init)
4. 创建gulpfile.js文件
   在项目根目录下创建一个名为’gulpfile.js’的文件
5. 运行gulp:
   gulp <任务名称>
   在命令行执行以下命令,如果不写任务名称,则自动运行default任务

工作流程

1. 选通过 gulp.src() 方法获取到想要处理的文件，并返回文件流
2. 然后文件流通过 pipe() 方法导入到 gulp 的插件中
3. 经过插件处理后的文件流再通过pipe()方法导入到 gulp.dest() 方法并把流中的内容写入到文件中

具体流程

	创建任务:
	gulp.task('任务名称',function(){
	})

	匹配要处理的文件:
	gulp.src(globs[,options])
	//gulp.src('路径')
	

	输出文件:
	gulp.dest(path[,options])
	//gulp.dest('路径')

	监听文件修改,并执行相应任务
	gulp.watch(glob[,opts],tasks)
	gulp.watch(glob[,opts,cb])


	## globs语法
	> globs需要处理的源文件匹配符路径，语法如下

	* 匹配单个文件：`gulp.src('src/js/index.js')`
	* 匹配多个文件：`gulp.src(['src/js/index.js','src/js/detail.js'])`
	* 匹配所有文件: `gulp.src('src/js/*.js')`
	* 匹配符：
    	`!`：排除文件，
    	`*`：匹配所有文件，
    	`**`：匹配0个或多个子文件夹，
    	`{}`：匹配多个文件名

gulp插件

大部分插件都可以在以下网址找到
http://www.npmjs.com

插件使用步骤

	1.安装插件:
	```powershell 
 		npm install --save gulp-htmlmin
 		>ps:可一次性安装多个插件,插件间用空格隔开
 	```
 	2.引入插件:
 	```js
 		let htmlmin = require('gulp-htmlmin')
 	```
 	3.使用插件:
 	```js
 		gulp.task('htmlmin',function(){
 		gulp.src('src/html/*.html') //匹配要处理的文件
 		>ps:(*代表当前目录下的所有html,**代表当前目录下的所有文件夹)
 			.pipe(htmlmin()) //插件执行
 			.pipe(gulp.dest('dist/html)'); //结果的位置
 		})
 	```

常用gulp插件

• html压缩:gulp-htmlmin
• css压缩: gulp-clean-css
• js压缩: gulp-uglify
• 合并文件: gulp-concat
• 文件重命名:gulp-rename
• js编译: gulp-babel
• 编译Sass: gulp-sass
  编译Less: gulp-less

其他常用插件

• 浏览器同步测试:browser-sync
• 创建node服务器:http-server

实例:

ES6转ES5:

	> es6转es5的gulp插件:gulp-babel
	> 依赖`@babel/core`,`@babel/preset-env`
	> 如需转换特殊功能，需要安装对应babel插件

	let babel = require('gulp-babel');

    gulp.task('es625', function(){
    	return gulp.src('./src/js/*.js')
    		.pipe(babel({
     			presets: ["@babel/env"],
     			plugins: []
     		}))                  
     		.pipe(gulp.dest('./dist/js'));
        });

sass转css:

	> gulp插件: gulp-sass
	> 依赖 `node-sass`
	
	//引入gulp插件
	const gulp = require('gulp');
	const sass = require('gulp-sass');

	gulp.task('buildSass',(done)=>{
		//匹配文件
		gulp.src('./src/sass/*.scss')
		
		// outputStyle参数：nested(默认），expanded：展开，compact：单行，compressed：压缩
		.pipe(sass({outputStyle:'expandewd'}).on('error',sass.logError))
		.pipe(gulp.dest('./src/css'))

		done();
	})

	//监听sass文件
	gulp.task('default',()=>{
		gulp.watch('./src/sass/*.scss',gulp.series('buildSass'))
	})