配置自动化构建工具Gulp
2017-09-14 08:17
295 查看
在此之前我们在看一下 AngularJS构建单页面应用WebApp目录介绍
为了将源码合并和压缩,用于节省http请求和带宽,这在移动端是非常有必要的。
Gulp这个工具有两个优点:
第一:它是基于流来实现,这样就决定了它的性能非常的高。简单的说它就是把那些产生的中间文件放在内存中进行处理,直到最后一步才生成文件、操作文件。
第二:它实际上是任务化的,我们编写配置文件,实际上是编写一个一个的小任务;然后合并那些任务,去执行那些任务。所以它的逻辑都是非常的清晰,可读性很好。
它常用API有:
src:读取文件或文件夹
dest:生成文件,也就是写文件
watch:监控文件
task:定制任务
pipe:使用流的方式来处理文件
切换到webapp目录
打开控制台,首先全局安装gulp
初始化一个配置文件
在当前目录下进行安装gulp,但是我们要将它保存在配置文件中,所以要加上参数–save-dev;
–save-dev参数的意思就是将这个node模块写到package.json这个配置文件当中;
当我们保存到git仓库的时候,只需要保存package.json这个配置文件就行了。
如果别人需要编译你项目,他只要拿到package.json这个配置文件,通过npm i命名,就可以很快的安装配置这些nodejs模块。
安装上述分析的模块、gulp插件
当安装好node模块后,我们就可以编写配置文件了。
我们在根目录创建一个gulpfile.js文件。
gulpfile.js 详细的gulp参数解释及配置教程
注意:使用的时候,建议将所有注释删除
为了将源码合并和压缩,用于节省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() { //定一个任务名叫less gulp.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() { //定一个任务名叫js gulp.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() { //定一个任务名叫image gulp.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配置文件gulpfile.js
- gulp前端自动化构建工具(三):gulp工具配置文件
- gulp自动化构建工具gulp-connect插件配置服务器实现热更新+自动刷新
- 自动化构建工具--gulp中gulpfile的基础配置
- JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端自动化构建工具gulp的使用总结
- gulp前端自动化构建工具(四):gulp文件路径处理模块
- 自动化前端构建工具--gulp
- 用gulp前段自动化构建工具的小心了,关于angular.js中取消success,error的功能,用then和.catch
- gulp前端自动化构建工具使用
- gulp基于流的自动化构建工具的使用《初》
- gulp 前端自动化构建工具之构建less
- 前端自动化构建工具-gulp
- gulp前端自动化构建工具入门篇
- gulp:更简单的自动化构建工具
- 自动化构建工具(gulp)
- 自动化构建工具—gulp的用法简单总结
- gulp前端自动化构建工具新手入门篇
- 前端自动化构建工具gulp使用指南