gulp入门学习

Posted 2020-08-14

一、gulp简介

    gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。

二、安装gulp

    在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gulp：

    $ npm install gulp

三、gulp函数接口介绍

    在编写gulp配置文件gulpfile之前，需要先了解常见的函数接口：

1. gulp.src()

    gulp的工作过程是这样的，首先通过gulp.src()获取我们想要处理的文件的stream（文件流）；然后，通过.pipe方法将stream导入到引用的gulp插件中进行相应的处理；最后通过gulp.dest()方法将处理后的流写入到文件中。

    从gulp工作过程中可以看到，gulp.src()主要用来从文件中获取文件流。gulp.dest()函数原型如下：

gulp.src(globs[, options]

    globs是文件的匹配路径和匹配形式。下面列举了部分常用的匹配形式：

（1）js/test.js    //精确匹配文件

（2）js/*.js        //匹配js目录下所有后缀为.js的文件

（3）js/**/*.js   //匹配js目录及其子目录下所有后缀为.js的文件

（4）！js/test.js //从匹配结果中排出js目录下的test.js文件

2. gulp.task()

    gulp.task()函数用来构建任务。函数原型为：

gulp.task(name[, deps], fn)

    name是所构建的任务名称。fn是任务所要执行的函数，gulp具体的工作过程是在fn中进行的。示例：

var webpack = require(‘gulp-webpack‘);
var config = require(‘./webpack.config‘);
gulp.task(‘webpack‘, function() {
    return webpack(config)
        .pipe(uglify())
        .pipe(gulp.dest(‘./dist/js‘));
});

    上面的代码是我在项目中使用的部分。该部分是webpack与gulp的联合使用，第一次看到别人用时，感觉发现了新大陆。task参数function中webpack会首先执行同一目录下的webpack.config.js配置文件，对代码进行模块打包；然后，返回打包后的所有文件的文件流；文件流通过pipe进入到uglify插件后进行压缩；最后，文件流通过gulp.dest写入到设置的目录下。

3.gulp.dest()

    gulp.dest()是对文件流的输出进行设置。函数原型为：

gulp.dest(path[, options])

    path是文件输出路径设置。注意：path只能生成文件的目录，不能生成文件的名称，不能生成文件的名称，不能生成文件的名称，不能生成文件的名称，重要的事说四遍。而最终生成的文件的名称是由gulp.src传入的文件名决定。下面会由示例的。

    文件最终生成的路径也需要注意：

（1）如果gulp.src(path)中的path带有通配符，则生成的路径由gulp.dest(path_dest)中的path_dest代替path通配符前面的部分组成。例如：

gulp.src(‘js/*/test.js‘)
//假设匹配到的文件为js/source/test.js
.pipe(gulp.dest(‘dist‘)); //最终生成的文件为 dist/source/test.js

（2）如果gulp.src(path)中的path没有带通配符，则生成的路径由gulp.dest(path_dest)中的path_dest与gulp.src引入的文件名组成。例如：

gulp.src(‘js/test.js‘)
.pipe(gulp.dest(‘dist‘)); //最终生成的文件为 dist/test.js

四、常用的gulp插件

1. gulp-uglify插件

    引入：

var uglify = require(‘gulp-uglify‘);

    作用：对js文件流进行压缩。

gulp.task(‘server_test‘, function() {
    return gulp.src(server/app.js)
        .pipe(uglify())
        .pipe(gulp.dest(‘./dist/js‘));
});

    上面代码中的uglify()会对流过它的js数据流进行压缩，然后有gulp.dest写入到js目录下。

2. gulp-less插件

    引入：

var less = require(‘gulp-less‘);

    作用：对less文件流进行压缩

gulp.task(‘server_test‘, function() {
    return gulp.src(server/device.less)
        .pipe(less())
        .pipe(gulp.dest(‘./dist/less‘));
});

    上面代码中的less()会对流过它的less数据流进行压缩，然后有gulp.dest写入到less目录下。

3. gulp-minify-css插件

    引入：

var minifyCSS = require(‘gulp-minify-css‘);

    作用：对css文件流进行压缩

gulp.task(‘server_test‘, function() {
    return gulp.src(server/control.css)
        .pipe(minifyCSS())
        .pipe(gulp.dest(‘./dist/css‘));
});

    上面代码中的minifyCSS()会对流过它的css数据流进行压缩，然后有gulp.dest写入到css目录下。

    gulp中有很多插件，具体根据需要来选择。

   

    兄弟姐妹们，看完后顶一下，收藏一下吧，深夜写博客累呀！！！ 还没有一杯热牛奶....