构建小能手---Gulp

小灰灰 2023-03-13 13:02 15阅读 0赞

# Gulp #

1.  基于node平台开发的前端构建工具（node第三方模块）
2.  将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
3.  用机器代替手工，提高开发效率。

### 1.Gulp能做什么 ###

1.  项目上线，HTML、CSS、JS文件压缩合并
2.  语法转换（es6、less …）
3.  公共文件抽离
4.  修改文件浏览器自动刷新

### 2.Gulp使用 ###

1.  使用npm install gulp下载gulp库文件
2.  在项目根目录下建立gulpfile.js文件
3.  重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4.  在gulpfile.js文件中编写任务.
5.  在命令行工具中执行gulp任务（安装gulp-cli命令行工具执行gulp任务）

### 3.Gulp中提供的方法 ###

1.  gulp.src()：获取任务要处理的文件
2.  gulp.dest()：输出文件
3.  gulp.task()：建立gulp任务
4.  gulp.watch()：监控文件的变化

const gulp = require('gulp');
      // 使用gulp.task()方法建立任务
     gulp.task('first', () => {
        // 获取要处理的文件
        gulp.src('./src/css/base.css') 
        // 将处理后的文件输出到dist目录
        .pipe(gulp.dest('./dist/css'));
     });

实例（用gulp拷贝一个文件）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]

### 4.Gulp插件 ###

1.  插件比较多，我们做到会用即可，此处举出几个常用的插件作为演示
2.  使用插件可参考官网：[npm官网][npm]

*  gulp-htmlmin ：html文件压缩
 *  gulp-csso ：压缩css
 *  gulp-babel ：JavaScript语法转化
 *  gulp-less: less语法转化
 *  gulp-uglify ：压缩混淆JavaScript
 *  gulp-file-include 公共文件包含
 *  browsersync 浏览器实时同步  
    **总结**：插件的使用步骤：安装->引入->调用

### 4.1演示 ###

##### 1.html任务（代码压缩，公共部分抽离） #####

// 引用gulp模块
    const gulp = require('gulp');
    // 引入处理HTML代码的模块
    const htmlmin = require('gulp-htmlmin');
    const fileinclude = require('gulp-file-include');
    
    // html任务
    // 1，html文件中代码压缩
    // 2，抽取html文件中公共代码
    gulp.task('htmlmin', async() => { 
        // 压缩src目录下所有HTML代码
        await gulp.src('./src/*.html')
            // 公共部分抽离
            .pipe(fileinclude())
            // 去除代码空格
            .pipe(htmlmin({  collapseWhitespace: true }))
            .pipe(gulp.dest('./dist'))
    });

**注意**：公共部分抽离时要写入模块提供的方法，把公共部分填入代码区（ @@include(’./common/hander.html’)），压缩后，公共部分代码依旧还在。

##### 2.css任务（代码压缩，less文件转换成css文件） #####

// 引入处理css的文件
    const less = require('gulp-less');
    const csso = require('gulp-csso');
    // css任务
    // 1，less文件转换成css文件
    // 2，css文件的压缩
    gulp.task('cssmin', async() => { 
        // 选择css目录下所有的less文件以及css文件
        await gulp.src(['./src/css/*.less', './src/css/*.css'])
            // less文件转换成css文件
            .pipe(less())
            // css代码压缩
            .pipe(csso())
            // 将处理后的结果进行输出
            .pipe(gulp.dest('./dist/css'))
    });

##### 3.js任务（es6语法转换成es5语法，js代码压缩） #####

const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    // js任务
    // 1，es6语法转换为es5语法
    // 2，js代码的压缩
    gulp.task('jsmin', async() => { 
        await gulp.src('./src/js/test.js')
            .pipe(babel({ 
                // 他可以判断当前代码运行环境，将代码转换成当前运行环境支持的代码
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
    });

##### 4.复制文件夹 #####

// 复制文件夹
    gulp.task('copy', async() => { 
        await gulp.src('./src/images/*')
            .pipe(gulp.dest('./dist/images'));
        await gulp.src('./src/lib/*')
            .pipe(gulp.dest('./dist/lib'));
    });

##### 5.构建全部任务 #####

gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));

### last：总结 ###

1.  此处只是演示了部分插件，更多的实用功能在我们用到时自行安装
2.  再次奉上官网[npm官网][npm]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/a1a0cc977c5646edb8bcdad7127e06c4.png
[npm]: https://www.npmjs.com/package/package