gulp入门学习

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp入门学习相关的知识,希望对你有一定的参考价值。

一、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中有很多插件,具体根据需要来选择。

   

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

以上是关于gulp入门学习的主要内容,如果未能解决你的问题,请参考以下文章

gulp入门学习

gulp入门

Gulp入门教程

gulp 入门使用指南(未完)

gulp入门

gulp入门