前端构建工具~第三方模块Gulp

第三方模块Gulp

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

gulp能做什么？

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

gulp使用

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

gulp中提供的方法

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

gulp插件

gulp-htmlminhtml	文件压缩
gulp-csso	压缩css
cssgulp-babeljs	语法转换（es6转es5)
gulp-lessless	语法转换（less转css)
gulp-uglify	压缩混淆js
gulp-file-include	公共文件包含
browsersync	浏览器实时同步

命令行工具：全局安装 gulp-cli工具 ，安装完成后通过命令gulp 任务名字（gulp dafault) 来执行任务

npm   install gulp-cli -g

package.json

{
  "dependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-csso": "^4.0.1",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^5.0.0",
    "gulp-uglify": "^3.0.2"
  }
}

gulpfile.js

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


//使用gulp.task建立任务
//1参数：任务的名称
//2.参数：任务的回调函数

gulp.task('first', (done) => {
    console.log('我们人生中的第一个gulp任务执行了');
    //使用gulp.src获取要处理的文件     通过pipe()处理后 将文件输出到dist目录中
    gulp.src('./src/css/index.css')
        .pipe(gulp.dest('dist/css'));
    done();  //异步任务完成
});


// html任务
//1.html文件中代码的压缩操作
//抽取html文件中的公共代码
//导入gulp-htmlmin 插件模块 压缩html文件
const htmlmin = require('gulp-htmlmin');
//导入gulp-file-include 公共文件包含
const fileinclude = require('gulp-file-include');

gulp.task('htmlmin', (done) => {
    //获取要处理的文件 src下面所有的html文件
    gulp.src('./src/*.html')
        .pipe(fileinclude()) //调用插件 公共文件包含
        .pipe(htmlmin({ collapseWhitespace: true }))  //压缩空格
        .pipe(gulp.dest('./dist')); //输出文件
    done();
});

//css任务
//less 语法转换css  2.css代码压缩
const less = require('gulp-less');
const csso = require('gulp-csso');


gulp.task('cssmin', (done) => {
    //选择css目录下所有的less文件和css文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        .pipe(less()) //将less语法转换为css语法
        .pipe(csso()) //将css代码进行压缩
        //将处理的结果进行输出
        .pipe(gulp.dest('./dist/css'));
    done();
    
});

//Js任务
//es6 代码转换  2.代码压缩
const babel = require('gulp-babel');  //导入代码转化 es6->es5
const uglify = require('gulp-uglify');//导入代码压缩模块


gulp.task('jsmin', (done) => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            //判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码 es6->es5
            presets: ['@babel/env']
        }))
        .pipe(uglify())  //代码压缩
        .pipe(gulp.dest('./dist/js'));
    done();
});


//复制文件夹任务
gulp.task('copy', (done) => {
    gulp.src('./src/imgs/*')
    .pipe(gulp.dest('dist/imgs'));
    done(); //结束任务
})

//构建任务 执行总任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', (done) => {
    done();//结束异步任务
}));