gulp
gulp是什么？
- gulp是前端开发中经常使用的自动化构建工具。自动化构建又是什么？
- 简单来说，一个完整的项目需要经历两个过程：开发阶段
development和项目上线阶段production。在程序中又常称作开发环境和生产环境，其实并没有多少含义，只是为了理清业务逻辑而已，了解就好。
-
在开发环境我们的项目代码需要把less转成css(因为less不能直接被浏览器解析)，需要给css3中的属性添加前缀，需要开启服务器自动监听文件的变化(改了一个宽度颜色啊，改了一个函数方法啊等等)，然后自动刷新页面(减少手动操作，提高开发效率)。等等一些需要在开发阶段解决的问题
-
在生产环境我们的项目代码也要进行许多处理，比如代码的压缩、图片压缩、去除调试语句、提取公共代码等等。
-
所以，自动化构建简单来说就是进行上面的操作的，而自动化构建工具就集成了这一大堆的操作，大大提高了开发效率。
那我们一起来用gulp构建一个简单的项目吧
提前操作：创建项目基本结构
基本目录结构
第一步：安装gulp
-
npm install gulp -g 安装全局gulp
- 以下都以gulp@3.9.1版本为例，4.x版本请参考其他文档。如果不小心下载了4版本，可以使用
npm install gulp@3.9.1 -g操作来覆盖之前的版本
-
npm init -y 初始化项目
-
npm install gulp -D 安装局部gulp依赖
第二步：在项目根目录下创建一个名为gulpfile.js文件
- gulpfile.js类似webpack中的配置文件，就是配置你到底要做哪些操作。
- 在gulpfile.js文件中写入如下基础代码，基本含义是：加载gulp模块工具，然后创建默认任务，
default是固定写法不能改变。后面的函数就是要执行的操作。而task方法就是创建任务的gulp方法。
//gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
//将你的默认的任务操作代码放在这里
})
//gulpfile.js
var gulp = require('gulp');
gulp.task("html", function () {}) //创建html操作任务。"html"只是名称，可以任意取
gulp.task("css", function () {}) //创建css操作任务
gulp.task("js", function () {}) //创建js操作任务
//创建默认执行任务，执行内容是 html操作任务、css操作任务、js操作任务
gulp.task('default', ["html","css","js"])
第三步：运行gulp
$ gulp
第四步：创建几个基本任务
- 创建
"default"默认任务并把任务操作分发给其他任务
- 创建
"html"任务用于对html文件的操作
- 创建
"css"任务用于对css文件的操作
- 创建
"js"任务用于对js文件的操作
- 创建
"image"任务用于对图片的操作
//gulpfile.js
//加载gulp模块
var gulp = require('gulp');
// 创建html任务
gulp.task("html", function () {
})
// 创建css任务
gulp.task("css", function () {
})
// 创建js任务
gulp.task("js", function () {
})
// 创建image任务
gulp.task("image", function () {
})
//创建默认任务，默认任务正好是创建的html任务，运行gulp会自动执行默认任务
gulp.task("default", ["html", "css", "js", "image"]);
第五步：给各个任务添加具体操作：获取文件-->输出文件
-
gulp.src方法含义：简单来说就是获取文件，要对哪一个文件进行操作。
-
gulp.pipe方法含义：gulp操作是基于流的操作，我们把整个操作过程都当作一条水管，pipe方法类似于把每一步操作放到水管中。
-
gulp.dest方法含义：简单来说就是文件操作完了输出到哪里。
- 一般我们会创建两个目录，一个是开发环境目录
./src 一个是生产环境目录./dist。如果没有创建生产环境目录，gulp操作完成之后会自动创建目录，并且dist目录下输出的文集及目录也会按照输出的地址自动创建。
//路径管理 以便后续文件路径更改操作
var folder = {
src: "src/",
dist: "dist/" //生产环境的目录，如果没有创建gulp操作会自动创建dist文件目录
}
// 创建html任务
gulp.task("html", function () {
gulp.src(folder.src + "html/*") //获取html文件
.pipe(gulp.dest(folder.dist + "html/")) //输出文件
})
// 创建css任务
gulp.task("css", function () {
gulp.src(folder.src + "css/*") //获取less文件
.pipe(gulp.dest(folder.dist + "css/")) //输出文件
})
// 创建js任务
gulp.task("js", function () {
gulp.src(folder.src + "js/*") //获取js文件
pipe(gulp.dest(folder.dist + "js/")) //输出文件
})
// 创建image任务
gulp.task("image", function () {
gulp.src(folder.src + "image/*") //获取图片
.pipe(gulp.dest(folder.dist + "image/")) //输出文件
})
第六步：给各个任务添加具体操作：压缩文件，转换less，添加css前缀，去除js调试语句
- 这一步骤需要gulp的插件支持，如何使用插件进行操作？
- 插件使用的基本过程：下载插件 --> 取到插件 --> 应用插件
- 下载插件
$ npm install gulp-htmlclean
$ npm install gulp-imagemin
$ npm install gulp-uglify
$ npm install gulp-strip-debug
$ npm install gulp-less
$ npm install gulp-postcss autoprefixer
$ npm install gulp-strip-debug
// 添加如下代码
// 压缩html
// 下载插件 gulp-htmlclean
var htmlClean = require('gulp-htmlclean'); //取到插件
// 压缩图片
// 下载插件 gulp-imagemin
var imageMin = require('gulp-imagemin');
// 压缩js
// 下载插件 gulp-uglify
var uglify = require('gulp-uglify');
// 去掉js中的调试语句
// 下载插件 gulp-strip-debug
var debug = require('gulp-strip-debug');
// 压缩css
// 下载插件 gulp-clean-css
var cleanCss = require('gulp-clean-css')
// 给css添加前缀
// 下载插件 gulp-postcss autoprefixer
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')
// less转css
// 下载插件 gulp-less
var less = require('gulp-less');
//更新之前的代码
// 创建html任务
gulp.task("html", function () {
gulp.src(folder.src + "html/*") //获取html文件
.pipe(htmlClean()) //压缩文件
.pipe(gulp.dest(folder.dist + "html/")) //输出文件
})
// 创建css任务
gulp.task("css", function () {
gulp.src(folder.src + "css/*") //获取less文件
.pipe(less()) //less转css
.pipe(postcss([autoprefixer()])); //添加前缀
.pipe(cleanCss()) //压缩css
.pipe(gulp.dest(folder.dist + "css/")) //输出文件
})
// 创建js任务
gulp.task("js", function () {
gulp.src(folder.src + "js/*") //获取js文件
.pipe(debug()) //清除调试语句
.pipe(uglify()) //压缩js文件
.pipe(gulp.dest(folder.dist + "js/")) //输出文件
})
// 创建image任务
gulp.task("image", function () {
gulp.src(folder.src + "image/*") //获取图片
.pipe(imageMin()) //执行压缩插件
.pipe(gulp.dest(folder.dist + "image/"))//输出文件
})
第七步：开启服务器代理和自动监听文件变化并刷新页面
- 理清思路：gulp上开启服务器需要依赖插件，那么我们下载插件并获取到
$ npm install gulp-connect
// 开启服务器
// 下载插件 gulp-connect
var connect = require('gulp-connect')
- 如何开启？需要创建开启服务器的任务
"server"
//开启服务器任务
gulp.task('server', function () {
connect.server({
port: "8888", // 设置端口号，不设置默认8080
livereload: true //开启刷新,什么时候刷新呢？需要在各个任务函数中设置
});
})
gulp.task("default", ["html", "css", "js", "image", "server"]); //默认任务中也要添加服务器任务
- 开启了服务器运行
$ gulp就可以在http://localhost:8888/中查看我们的页面了。
- 接下来是监听文件变化，同样的也需要创建监听任务
// 创建监听任务
gulp.task('watch', function () {
gulp.watch(folder.src + 'html/*', ['html']) //监听html文件，一旦文件变化就执行html任务
gulp.watch(folder.src + 'css/*', ['css']) //监听css文件
gulp.watch(folder.src + 'js/*', ['js']) //监听js文件
})
gulp.task("default", ["html", "css", "js", "image", "server", "watch"]); //默认任务中也要添加监听任务
- 接下来是自动刷新，上面设置了自动刷新
livereload: true,但是需要明确几点
- 开启监听任务并不能自动刷新页面，因为监听任务只监听变化，并不会帮助自动刷新页面。
- 自动刷新功能是开启了，但是什么时候自动刷新呢？ 当然是在代码内容发生更改的时候自动刷新页面
- 所以我们在各个任务操作函数中进行添加自动刷新操作
gulp.pipe(connect.reload())
- 拿html任务举例，其余任务类似
//更新之前的代码
gulp.task("html", function () {
gulp.src(folder.src + "html/*")
.pipe(connect.reload()); //每次文件改变刷新页面
.pipe(htmlClean()) //压缩文件
.pipe(gulp.dest(folder.dist + "html/"))
})
第八步：针对不同环境进行操作
- 由于上面操作集合了开发环境和生产环境，不利于开发，下面将两者操作分开
- 其实就是让开发阶段做开发的事，项目上线阶段做上线的事(压缩代码等操作)
- 需要明确几点：
- 如何设置当前的操作环境，比如我就想设置一下当前是在开发环境下，可以在命令行中执行:
$ export NODE_ENV=development # 同样的,生产环境是production
- 那么如何判断当前处在什么环境呢？从而执行
$ gulp进行不同环境下的任务操作
- 有如下方法进行判断
var devMode = process.env.NODE_ENV == "development"; //判断环境变量
- 所以就可以在各个任务函数中判断当前所处环境，再进行不同操作，如下，以html任务为例，其他任务同理
//更新之前的代码
gulp.task("html", function () {
var page = gulp.src(folder.src + "html/*")
.pipe(connect.reload()); //每次文件改变刷新页面
if (!devMode) { //如果是生产环境
page.pipe(htmlClean()) //压缩文件
}
page.pipe(gulp.dest(folder.dist + "html/"))
})
- 这样整个项目利用gulp的简单构建就完成了。如果有错误欢迎指出，共同学习。以上都是本人手敲的，如果觉得不错不妨点个小心心
网友评论