欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

gulp自动化构建工具

程序员文章站 2024-02-25 11:19:16
...

当我们实际做项目时,我们通常会:由多个开发者共同开发一个项目,每位开发者负责不同的模块;使用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等一系列任务都需要安装具体的插件。
gulp自动化构建工具
项目目录中执行:

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的路径和名称引入,这点应注意。