认识gulp —— 这样学习

前言

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

一、gulp的基本方法

gulp.task(); //建立gulp任务 
gulp.src();  //获取文件
gulp.dest();  //输出文件
gulp.watch();  //监控文件变化

gulp.task()语法规范：

展示：

主要任务：将src/css/base.css文件输出到dist/css目录下

代码：

const gulp = require('gulp');

gulp.task('first', async =>{
    console.log('第一个gulp任务执行');

    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'));
    async ();
})

执行命令:

gulp first

二、gulp的html任务

下载html任务插件：

展示：

代码：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

// html任务
// 1、html文件中代码的压缩操作
// 2、将html中公共代码 抽取出来
gulp.task('htmlmin', done => {
    
    gulp.src('./src/*.html')
        // 抽取代码
        .pipe(fileinclude())

        //压缩html公共代码
        .pipe(htmlmin({
            collapseWhitespace: true //是否折叠空格？true
        }))
        .pipe(gulp.dest('dist'));

    done();

})

执行命令：

gulp htmlmin

三、gulp的css任务

下载css任务插件：

Gulp4.0版本 npm install gulp-less、npm install gulp-csso 不能直接下载

展示：

代码：

const gulp = require('gulp');
const gulpless = require('gulp-less')
const csso = require('gulp-csso')

// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task("cssmin", done => {

    //选择css目录下所有.less、.css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])

        //语法转换
        .pipe(gulpless())

        //压缩
        .pipe(csso())

        .pipe(gulp.dest('dist/css')) //将处理的结果输出

    done();
})

执行命令：

gulp cssmin

四、gulp的javascript任务

下载js任务插件：

cnpm install gulp-babel @babel/core @babel/preset-env ES6语法转换

cnpm install gulp-uglify 压缩代码

展示：

代码：

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

//- gulp.task("执行任务名字",回调函数){}
gulp.task("jsmin", done => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
    done();
})

写在最后

前端开发总要有个自动化构建工具，不管是webpack还是gulp，可单用，也可一起用，根据项目需求使用。

gulp和webpack的区别我们下次再区分，详细学习它们两者的区别。