gulp自动化构建工具
当我们实际做项目时,我们通常会:由多个开发者共同开发一个项目,每位开发者负责不同的模块;使用less、sass等一些预处理程序,降低CSS的维护成本,最终需要将这些预处理程序进行解析;合并css、javascript,压缩html、css、javascript、images以加速网页打开速度,提升性能;
这一系列的任务完全靠手动完成几乎是不可能的,而借助构建工具可以轻松实现。所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括:Grunt、Gulp、F.I.S(百度出品)、webpack
接下来说一下gulp的使用方法:
一.使用前提
1.安装nodejs、npm。gulp是基于nodejs开发,必须先安装nodejs,具体安装方法可参考之前的文章
2.建议安装git。
二、gulp使用
1.全局安装gulp,在任意位置打开git命令行执行以下:
npm install gulp -g
-g是-global的缩写,全局安装的意思,之后执行gulp -v,出现版本号说明全局安装成功。
2.创建一个项目文件夹如gulpFil,这就是我们的开发工作目录,然后切换到这个空文件夹下,创建一个src文件夹,并在src下根据具体需要创建index.html等文件、images、js、style、view等文件夹,具体开发代码就写在这里面。
3.在项目文件夹gulpFil下执行npm init
,后一路回车,注意开始输入文件名时不能大写。这句命令主要是为了在项目中生成package.json文件,该文件记录了所有安装的依赖,也就是所有项目需要的三方插件,主要是起到记录的作用。
4.项目中安装gulp
上面第一步是全局安装gulp,只需执行一次,而我们每做一个项目在项目中都需要再生成一个gulp,可以理解为专门为这个项目服务的,切换到项目目录如(gulpFil中)执行以下:
npm install --save-dev gulp
–save-dev的意思是安装并记录开发依赖(devDependencies),我们说package.json就是记录依赖的,现在我们打开package.json发现多了这句命令安装的gulp依赖记录。还多了什么呢,项目目录下还多了一个node_modules文件夹,里面就是我们安装的具体插件,刚刚安装的gulp也在其中。
5.安装具体的gulp插件
安装gulp之后,我们还需要安装gulp插件,简单来说是用什么装什么就可以。如下图我们要实现合并压缩解析less等一系列任务都需要安装具体的插件。
项目目录中执行:
npm install gulp-less gulp-cssmin gulp-imagemin gulp-concat gulp-uglify gulp-connect open --save-dev
执行完毕后package.json文件中又多了以上插件的依赖记录,node_modules文件夹中也下载了上述插件的具体文件夹。
简单解释一下它们的作用:
1. gulp-less:把less文件解析并转换成css文件。
2. gulp-cssmin:压缩css文件
3. gulp-imagemin:压缩图片
4. gulp-uglify:丑化代码
5. gulp-concat:合并js代码,多个js文件最终都会被合并成为一个js文件
6. gulp-connect:实现热加载
6、项目中创建gulpfile.js文件,此文件中描述gulp具体执行的任务,也就是上面装好插件工具我们就要具体干活了。文件内容一般如下,当然自己可以再拓展
//一、设置目录地址,分别是下面三块
var app = {
srcPath:'src/',//代码目录
buildPath:'build/',//设置开发目录
distPath:'dist/'//生产打包上线目录
}
//二、引入插件js文件
/*1.引入gulp及插件,也就是引入我们下载的node_modules中的插件对应的js文件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');
//三、定义任务gulp.task('任务名',回调函数)
/*1.定义lib任务*/
gulp.task('lib',function () {
gulp.src('bower_components/**/*.js')//找到bower_components目录并把下的所有js文件放到开发和生产目录中的lib文件夹中
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload())
});
/*2.定义任务html任务*/
gulp.task('html',function (){
/*gulp.src指要操作哪些文件来确定源文件地址,意思是取src下所有目录下的所有.html文件*/
gulp.src(app.srcPath+'**/*.html')
/*pipe管道的意思,gulp.dest指把文件从源地址移动到指定目录下,没有指定的目录会自动创建*/
.pipe(gulp.dest(app.buildPath))
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload())
});
/*3.定义编译less任务*/
gulp.task('less',function () {
/*找到index.less文件,注意一般只提取index.less文件,如果有多个less文件可以用import方式先全部引入到index.less中。*/
gulp.src(app.srcPath+'style/index.less')
.pipe(less())//用less方法解析less代码
.pipe(gulp.dest(app.buildPath+'css/'))//把解析后生成的的css文件放到build开发文件夹的css文件夹中
.pipe(cssmin())//cssmin()方法压缩css代码
.pipe(gulp.dest(app.distPath+'css/'))//把压缩后的css文件放到生产目录中
.pipe(connect.reload())
});
/*4.定义合并js任务*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')//找到代码目录里的所有js文件
.pipe(concat('index.js'))//合并到index.js文件中
.pipe(gulp.dest(app.buildPath+'js/'))//移动到开发目录的js目录下
.pipe(uglify())//丑化js代码
.pipe(gulp.dest(app.distPath+'js'))//丑化后的代码放到生产目录下
.pipe(connect.reload())
});
/*5.压缩图片任务*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});
//四、整合执行任务
/*1.定义build任务,同时执行[]中的多个任务*/
gulp.task('build',['less','html','js','image','lib']);
/*2.定义设置服务器任务,并设置先执行[]中的build任务*/
gulp.task('server',['build'],function () {
connect.server({
root:[app.buildPath],//设置要运行的目录是build开发目录
livereload:true,//设置是否热加载
port:9999//设置端口号
})
/*3.设置监听的文件,一旦坚挺的文件发生变化则重新自动执行gulp对应的任务名称并生成开发和生产目录*/
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']);
//打开浏览器
open('http://localhost:9999');
});
/*4.定义默认任务 执行'gulp'命令则执行默认任务,相当于一个总开关,
默认任务实际执行的是‘server'任务,而server任务又会
先执行’build'任务,很有意思是个链式作用*/
gulp.task('default',['server']);
7.项目目录中执行gulp
,后会自动打开浏览器和服务器运行项目。一般设置命令运行的目录是开发目录也就是build下的文件,所以我们在html文件中引入css文件和js文件要按照build目录下css和js的路径和名称引入,这点应注意。
上一篇: 无焦点获取条码枪返回值示例
下一篇: gulp--自动化构建工具学习笔记
推荐阅读
-
gulp自动化构建工具
-
gulp--自动化构建工具学习笔记
-
使用Jenkins Pipeline自动化构建发布Java项目的方法
-
使用Jenkins配置Git+Maven的自动化构建的方法
-
ETL调度系统及常见工具对比:azkaban、oozie、taskctl 数据抓取ETL调度大数据自动化运维kittle
-
使用python3和flask构建RESTful API(接口测试服务与mockserver工具)
-
C#Make自动化构建-简介 博客分类: C#
-
从零开始构建MSBuild C#项目文件 博客分类: C# Msbuild自动化构建
-
从零开始构建MSBuild C#项目文件 博客分类: C# Msbuild自动化构建
-
C#Make自动化构建-简介 博客分类: C#