Node.js第三方模块Gulp

Gulp 是什么?

Gulp是基于node平台开发的前端构建工具。

Gulp 能做什么?

1、当Web前端项目上线时,可以通过Gulp对HTML、CSS、JS文件进行压缩合并

2、通过Gulp将ES6语法转换为ES5语法,将less转换为为普通css语法

3、通过Gulp可以实现当修改项目中的文件时,浏览器自动刷新。

怎么使用Gulp?

1、通过npm安装Gulp

npm install gulp

2、在项目根目录下创建gulpfile.js文件

3、重构项目的文件夹结构,创建src文件夹放置源代码文件,创建dist目录放置构建后的文件

src文件夹

4、在gulpfile.js文件中编写任务,如下示例代码:

/*
引入gulp模块
 */
const gulp = require('gulp');

/*
使用gulp对象中task()创建一个任务
参数一:任务名称 compressTask
参数二:该任务执行的回调函数,done表示执行完成的回到函数
 */
gulp.task('compress',(done) => {

    console.log('该任务执行了');
    /*
    获取要处理的文件
    参数一:要处理的文件的路径
     */
     gulp.src('./src/css/index.css')
        /*
         将处理后的文件输出到dist目录
         pipe() 用于处理文件的,注意:必须将要处理的代码卸载该参数中
         dest() 通过改函数输出文件   参数一:存放处理结果的文件路径
          */
        .pipe(gulp.dest('dist/css'));
    //调用执行完成的回调函数
    done();
});

执行gulp中的任务:

1、首先需要通过npm安装gulp-cli

npm install -g gulp-cli

2、然后可以通过gulp -v 来检测是否安装成功,如果出现版本号即表示安装成功

gulp-cli

3、然后在项目根目录通过gulp 任务名称 命令来执行该任务

gulp 任务名称

效果图:

gulp 任务名称

Gulp中提供的方法:

获取任务要处理的文件

gulp.src()

输出文件

gulp.dest()

建立gulp任务

gulp.task()

监控文件的变化

 gulp.watch()

Gulp常用命令

1、列出可用任务

gulp --tasks

2、执行某一个任务

gulp 任务名称

Gulp插件

gulp-htmlmin 对HTML进行压缩的插件

gulp-csso 对css进行压缩的插件

gulp-babel 将ES6语法转换为ES5的插件

gulp-less 将less语法转换为css语法的插件

gulp-uglify 对Javascript进行压缩混淆的插件

gulp-file-include 对公共文件进行抽取的插件

browsersync 当修改项目文件,浏览器进行实时更新的插件

Gulp插件怎么使用?

1、通过npm命令去下载这个插件

npm install gulp-csso

2、在项目根目录下的gulpfile.js中引入这个插件

//gulpfile.js
/*
引入gulp-csso这个插件
 */
const gulpCSSO = require('gulp-csso');

3、调用该插件中的函数即可

//gulpfile.js
/*
引入gulp模块
 */
const gulp = require('gulp');
/*
引入gulp-csso这个插件
 */
const gulpCSSO = require('gulp-csso');


/**
 * 通过gulp-csso插件创建了一个压缩CSS文件的任务
 * 参数一:该任务的名称
 * 参数二:该任务的回调函数
 */
gulp.task('compressCss',(done) => {

    /*
    获取css文件夹下的所有.css文件;*表示所有
     */
    gulp.src('./src/css/*.css')
        // gulpCSSO() 表示对当前的css文件进行默认配置压缩
        .pipe(gulpCSSO())
        // 表示压缩完成以后将所有的.css文件输出到dist/css中
        .pipe(gulp.dest('dist/css'));

    // 该任务已完成
    done();
});

效果图:

Gulp插件的使用

通过gulp-babel将ES6语法转换为ES5语法,并通过gulp-uglify对.js文件进行压缩混淆:

1、安装gulp-babel和gulp-uglify

 npm install --save-dev gulp-babel @babel/core @babel/preset-env 
 npm install --save-dev gulp-uglify 

2、 在项目根目录下的gulpfile.js中引入这两个插件

//gulpfile.js
/*
引入gulp模块
 */
const gulp = require('gulp');

/*
引入gulp-babel
 */
const gulpBabel = require('gulp-babel');
/*
引入gulp-uglify
 */
const gulpUglify = require('gulp-uglify');

3、创建该任务

//gulpfile.js
/*
引入gulp模块
 */
const gulp = require('gulp');

/*
引入gulp-babel
 */
const gulpBabel = require('gulp-babel');
/*
引入gulp-uglify
 */
const gulpUglify = require('gulp-uglify');



/**
 * 1、通过gulp-babel将es6语法转换为es5语法
 * 2、通过gulp-uglify对Javascript进行压缩混淆
 * 参数一:该任务的名称
 * 参数二:该任务的回调函数
 */
gulp.task('compressJS',(done) => {

    //读取js文件夹下的所有.js文件
    gulp.src('./src/js/*.js')
    // 将指定的所有.js文件中的ES6语法转换为ES5语法
        .pipe(gulpBabel({
            presets:['@babel/env']
        }))
        // 将指定的.js文件进行压缩混淆
        .pipe(gulpUglify())
        // 将指定的.js文件输出到js目录下
        .pipe(gulp.dest('dist/js'));

    //到此该任务结束
    done();

});

4、在项目根目录通过gulp命令执行该任务

gulp compressJS 

通过一个任务,让其它的任务依次执行:

/**
 * 实现执行一个任务,让其它的任务依次执行
 * 参数一:该任务的名称
 * 参数二:任务系列,其中htmlmin,compressCss等等表示其它任务的名称
 */
gulp.task('default',gulp.series('htmlmin','compressCss','compressJS','copy',done => done()));
如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注