# gulp快捷键

**Repository Path**: Liu-xing-yang/web0815

## Basic Information

- **Project Name**: gulp快捷键
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-04
- **Last Updated**: 2023-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

构建工具
	自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。
	构建工具：Grunt、gulp、webpack、fis3

	1.Gulp
		1.安装：
			npm install --global gulp
		2.项目依赖
			npm install --save-dev gulp
		3.在项目根目录下创建文件：gulpfile.js
		4.编写gulpfile.js
			var gulp = require('gulp');
			gulp.task('default', function() {
				// 将你的默认的任务代码放在这
				console.log("这是gulp的默认任务");
			});
		5.执行
			gulp

		6.使用gulp
			注意：gulp本身可以看做是一个容器，要使用相应的功能，需要第三方包的支持
				例如：压缩，需要加载压缩的包。。。
		7.gulp方法：
			gulp.task(str,fn)
				创建一个gulp任务
			gulp.src(path)
				文件来源
			gulp.dest(path)
				操作之后的文件到哪里去
			.pipe(package)
				执行一个gulp功能
			gulp.watch() 
				监听
			gulp.start()
				执行gulp任务
		8.任务
			1.压缩js文件
				npm install --save-dev gulp-uglify
			2.压缩CSS文件
				npm install --save-dev gulp-minify-css
			3.压缩HTML文件
				npm install --save-dev gulp-minify-html
			4.压缩图片
				npm install --save-dev gulp-imagemin
			5.代码检查
				npm install --save-dev gulp-jshint jshint
			6.合并、重命名
				npm install --save-dev gulp-concat gulp-rename
			7.监听：
				gulp.task("watch",function(){
				    gulp.watch('libs/js/*.js', function(){
				        gulp.run('uglify-js');
				    });
				})
			8.Less编译为CSS文件
				npm install --save-dev gulp-less 
			9.热更新：
				命令：npm install gulp-livereload --save-dev
				全局服务器：npm install -g http-server
				插件：LiveReload （直接点击启动）


项目中需要gulp的环境时：可以直接将之前的配置过的package.json文件直接赋值到项目根文件下，然后开启cmd服务器，直接在根目录下配置npm install，等待配置11个文件，这样更快速创建环境。


gulp页面上线的处理：

	把src目录下的文件打包到dist底下，运行上线的文件均是dist文件
	并且需要将html页面所有的css、js、images等的路径配置修改，除了引用的第三方文件，自己写的css、js、images等都需要压缩、合并、重命名的过程
	路径都变成dist底下的路径
	我们写的src文件夹的具体可读代码只是由自己阅读、修改、测试

	监听、热处理配合使用：

		监听当前修改的页面(比如html)，运行的是要压缩html的事件
		而热处理是监听修改的页面对应的dist文件，
		这样才能保证更改src文件夹下的文件，dist文件夹下的文件自动修改，页面自动渲染