配置自动化构建工具Gulp

在此之前我们在看一下 AngularJS构建单页面应用WebApp目录介绍

为了将源码合并和压缩，用于节省http请求和带宽，这在移动端是非常有必要的。

Gulp这个工具有两个优点：
第一：它是基于流来实现，这样就决定了它的性能非常的高。简单的说它就是把那些产生的中间文件放在内存中进行处理，直到最后一步才生成文件、操作文件。
第二：它实际上是任务化的，我们编写配置文件，实际上是编写一个一个的小任务；然后合并那些任务，去执行那些任务。所以它的逻辑都是非常的清晰，可读性很好。

它常用API有：
src：读取文件或文件夹
dest：生成文件，也就是写文件
watch：监控文件
task：定制任务
pipe：使用流的方式来处理文件

切换到webapp目录

//首先我们需要安装一下gulp插件，再来分析一下需要编写的任务
gulp
gulp-clean
gulp-concat
gulp-connect
gulp-cssmin
gulp-imagemin
gulp-less
gulp-load-plugins
gulp-plumber 一旦编译CSS或者JS发生错误，不会立即中断线程，而只是抛出错误
gulp-uglify
open
//在分析一下需要编写的任务
lib
html
json
css
js
images
clean
reload
watch

打开控制台，首先全局安装gulp

cnpm i -g gulp

初始化一个配置文件

npm init //直接回车到底，相关信息可以在后面修改
//生成了package.json配置文件

在当前目录下进行安装gulp，但是我们要将它保存在配置文件中，所以要加上参数–save-dev;
–save-dev参数的意思就是将这个node模块写到package.json这个配置文件当中;
当我们保存到git仓库的时候，只需要保存package.json这个配置文件就行了。
如果别人需要编译你项目，他只要拿到package.json这个配置文件，通过npm i命名,就可以很快的安装配置这些nodejs模块。

cnpm i --save-dev gulp

安装上述分析的模块、gulp插件

cnpm i --save-dev 模块名
//安装node模块是可以批量安装的：如下
cnpm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open

当安装好node模块后，我们就可以编写配置文件了。

我们在根目录创建一个gulpfile.js文件。
gulpfile.js 详细的gulp参数解释及配置教程
注意：使用的时候，建议将所有注释删除

var gulp = require('gulp'); //引入最重要的模块,gulp模块
var $ = require('gulp-load-plugins')(); //引入一个方便的模块,但不是必须的；有了这个模块,其他的模块就可以通过$符号来引入,而不需要声明这个变量,这就是它给我们带来的好处
//在引入gulp-load-plugins的时候，需要对其实例化,加()var open = require('open');var app = { // 声明一个全局变量,这个全局变量主要是用来定义我们的目录路径srcPath: 'src/',   //源代码目录devPath: 'build/', //整合之后的文件prdPath: 'dist/'   //生产部署目录
};//之前我们通过bower安装了一些第三方依赖,但是这些依赖需要放到开发目录和生产环境
gulp.task('lib', function() { //首先使用task函数定义一个任务,这个任务名叫做lib,在传入一个回调函数//在回调函数内部输入需要执行的任务列表gulp.src('bower_components/**/*.js') //读取文件 传入文件路径 **/*表示对上层文件夹下的子文件进行深度遍历.pipe(gulp.dest(app.devPath + 'vendor')) //将文件拷贝到开发目录下,给它重新命名为vendor.pipe(gulp.dest(app.prdPath + 'vendor')) //将文件拷贝到生产目录下,给它重新命名为vendor.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
});gulp.task('html', function() { //定义任务名称叫做html gulp.src(app.srcPath + '**/*.html') //读取这个文件下的所有的html文件.pipe(gulp.dest(app.devPath)) //将这些文件拷贝到开发目录.pipe(gulp.dest(app.prdPath)) //将这些文件拷贝到生产目录.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
})gulp.task('json', function() { //在没有后端的时候做的虚拟数据,在有后端API的情况下可以不写这个gulp.src(app.srcPath + 'data/**/*.json') //读取这个json文件.pipe(gulp.dest(app.devPath + 'data')) //将文件拷贝到开发目录的data目录下,给它重新命名为data.pipe(gulp.dest(app.prdPath + 'data')) //将文件拷贝到生产目录的data目录下,给它重新命名为data.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
});gulp.task('less', function() { //定一个任务名叫lessgulp.src(app.srcPath + 'style/index.less') //用less文件来引入其他的less文件,在编译的时候，只需要编译这一个less文件就行了.pipe($.plumber()).pipe($.less()) //编译less文件 因为第2行引入的插件 此处无需重新声明,直接用$符引入即可.pipe(gulp.dest(app.devPath + 'css')) //编译完成之后放到我们的开发目录下的css文件夹.pipe($.cssmin()) //在放入生产环境之前将其压缩一下.pipe(gulp.dest(app.prdPath + 'css')) //放到我们的生产目录下的css文件夹.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
});gulp.task('js', function() { //定一个任务名叫jsgulp.src(app.srcPath + 'script/**/*.js') //读取script目录下的所有js文件.pipe($.plumber()).pipe($.concat('index.js')) //我们需要将这些js文件合并,生产一个index.js文件.pipe(gulp.dest(app.devPath + 'js')) //合并完成之后将js放到开发目录.pipe($.uglify()) //发布到生产环境的时候需要对其进行压缩.pipe(gulp.dest(app.prdPath + 'js')) //压缩之后放到生产目录.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
});gulp.task('image', function() { //定一个任务名叫imagegulp.src(app.srcPath + 'image/**/*') //读取image目录下的所有文件.pipe($.plumber()).pipe(gulp.dest(app.devPath + 'image')) //将文件拷贝到开发目录下的image.pipe($.imagemin()) //放到生产环境之前，对其进行压缩.pipe(gulp.dest(app.prdPath + 'image')) //将压缩之后的文件在放到生产目录下.pipe($.connect.reload()); //通知服务器刷新,进行实时预览 (仅支持高级浏览器)
});//在写完合并、压缩、发布这些任务之后,我们在写一个总任务,起个名字叫build,把它们进行合并起来
gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
//这样在执行整个打包任务的时候,只要执行build任务就行了gulp.task('clean', function() { //以上配置完成后,基本上我们静态文件就可以合并和压缩以及发布了//但是每次发布之前需要对之前发布的内容进行清除,避免就的文件对当前项目造成影响// 所以我们要编写一个清除的任务gulp.src([app.devPath, app.prdPath]) //读取开发目录和生产目录下的所有文件.pipe($.clean()); //清除一下开发目录和生产目录
});//在开发完一段代码之后,我们启动服务器build一下,这样的任务我们可以编写一个任务让它自动化的执行
gulp.task('serve', ['build'], function() { //写一个任务叫做serve$.connect.server({ // 启动一个服务器root: [app.devPath], //这个服务器默认从开发目录下进行读取livereload: true, //每当写完确认后，自动刷新浏览器 (仅支持高级浏览器,不支持IE)port: 3000 //端口设为:3000});open('http://localhost:3000'); //服务器启动之后自动拉起浏览器打开网址//watch的任务是监控文件,这里我们监控原路径的文件//这样我们修改源文件的时候,他就会自动修改对应的构建任务gulp.watch('bower_components/**/*', ['lib']);gulp.watch(app.srcPath + '**/*.html', ['html']);gulp.watch(app.srcPath + 'data/**/*.json', ['json']);gulp.watch(app.srcPath + 'style/**/*.less', ['less']);gulp.watch(app.srcPath + 'script/**/*.js', ['js']);gulp.watch(app.srcPath + 'image/**/*', ['image']);
});gulp.task('default', ['serve']); // 定义gulp的默认任务 这样我直接在命令行执行gulp,它就会直接指向default的任务/*
思路小结:
1、首先我们需要引入gulp模块
2、编写各个文件的拷贝、合并、压缩、发布任务
3、编写一个叫build的总任务将前面的各个任务合并起来
4、编写清除任务,每次发布任务之前对之前的任务进行清除
5、编写服务器serve任务,让服务器启动之后自动执行build任务
6、编写open,让服务器启动之后,自动拉起浏览器打开对应网址
7、编写监控任务watch,对对应的源文件进行监控
8、编写gulp默认任务,让gulp启动后直接启动serve任务
*/

配置自动化构建工具Gulp相关推荐

（28）自动化构建工具Gulp
一.自动化构建工具介绍 Grunt:它是最早的自动化构建工具,它是基于临时文件进行构建的,构建速度慢. Gulp:它是基于内存进行构建的.是我们目前最流行最常用的自动化构建工具.构建速度快,上手更容易 ...
常用的前端自动化构建工具gulp/grunt/fis --简介
常用的前端自动化构建工具之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力,那么我们会了解 Gulp Grunt fIS 用法基本相同:都是通过 ...
前端工程化实战 - 自动化构建工具
文章目录一.自动化构建简介二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
使用Jenkins配置iOS自动化构建工具
关于iOS自动化构建其实并不复杂,通过一些简单的Git与Xcode指令,加上UI,我们自己也可以动手编写一款自动化构建工具.这在之前的博客中也有涉及,有兴趣的朋友可以在如下地址找到这篇博客: 自己动手 ...
前端构建工具gulp之基本介绍
1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基 ...
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
前端构建工具Gulp的学习和使用
前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...
前端自动化构建-为什么使用前端自动化构建以及gulp简介
前端自动化构建-为什么使用前端自动化构建以及gulp简介一开始接触到这个东西,真的是不知道是什么样的一个概念,所以也在网上看了一一些资料,理解一下. 1. 前端开发存在的问题开发慢 (1) 项目架 ...

配置自动化构建工具Gulp

配置自动化构建工具Gulp相关推荐

最新文章

热门文章