原来gulp这么简单！！

安装gulp

一、gulp简介

gulp 是一个基于node的自动化打包构建工具，前端开发者可以使用它来处理常见任务

二.gulp的安装

在命令行工具，依次执行：

① 全局安装：npm i gulp -g

② 局部安装：npm i gulp -D

③ 检测安装版本：gulp -v

注： gulp -v 命令得到两个版本号，一个全局，一个局部，代表安装成功

此时项目结构如下：

node-modules中包含下载的插件名字 该文件自动生成

三 . 创建项目结构

dist需要手动创建 用来保存经过gulp插件运行完后的文件

四.gulp配置文件

在项目目录中创建gulp配置文件 --> gulpfile.js

可以直接在里面编写内容任务

五.gulp运行方法

使用命令 gulp +任务名字 即可运行

了解gulp常用插件以及使用

gulp-htmlmin 和 gulp-file-include 压缩并抽取HTMl文件

gulp-htmlmin压缩HTML文件

1.在文件终端安装gulp-htmlmin插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-htmlmin

2 .在gulpfile.js文件中引用插件

const htmlmin = require('gulp-htmlmin')

3. 在gulpfile.js文件调用插件gulp-htmlmin实现HTML文件的压缩

/*
参数一：任务名字
参数二：回调函数
*///建立任务：压缩html以及抽取公共部分
gulp.task('htmlmin', callback => {
    // 抽取html文件中的公共代码
    gulp.src('./src/*.html')
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
            //文件输出路径
        .pipe(gulp.dest('dist'))
       callback();
})

1. 运行

gulp htmlmin

gulp-file-include抽取HTMl文件代码

1. 在文件终端安装gulp-file-include插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-file-include

2. 在gulpfile.js文件中引用插件gulp-file-include

// 引用gulp-file-include插件
const fileinclude = require('gulp-file-include');

3. 在gulpfile.js文件调用插件gulp-file-include实现HTML文件抽取

/*
参数一：任务名字
参数二：回调函数
*///建立任务：压缩html以及抽取公共部分
gulp.task('htmlmin', callback => {
    // 抽取html文件中的公共代码
    gulp.src('./src/*.html')
        // 压缩html文件中的代码
        .pipe(fileinclude())
             // collapseWhitespacey用单个空格替换多个空格
        .pipe(htmlmin({ collapseWhitespace: true }))
            //文件输出路径
        .pipe(gulp.dest('dist'))
       callback();
})

4. 在src目录下新建common目录并创建header.html文件把头部公共代码粘贴到header.html上

5. 在src目录下的default.html和article.html的头部代码删除修改以下代码

    @@include('./common/header.html')

6. 运行

gulp htmlmin

gulp-less和gulp-csso Less语法转化为Css语法压缩Css代码

gulp-less 将 Less语法转化为Css语法

1. 在文件终端安装gulp-less插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-less

2. 在gulpfile.js文件中引用插件gulp-less

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

3. 在gulpfile.js文件调用插件gulp-less实现将less语法转换为css语法

gulp.task('cssmin',callback=>{
    //获取css 目录下所有less文件
    gulp.src('./src/css/*.less')
    //将less转化为css语法
    .pipe(less())
    //输出文件到dist
    .pipe(gulp.dest('./dist/css'))
    callback();

})

gulp-csso将css代码进行压缩

1. 在文件终端安装gulp-csso插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-csso

2. 在gulpfile.js文件中引用插件gulp-csso

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

3. 在gulpfile.js文件调用插件gulp-csso实现将css代码进行压缩

gulp.task('cssmin',callback=>{
    //获取less和css文件
    gulp.src(['./src/css/*.less',
    './src/css/*.css'])
    //将less转化为css语法
    .pipe(less())
    //压缩csso文件
    .pipe(csso())
    //输出文件到dist
    .pipe(gulp.dest('./dist/css'))
    callback();

})

gulp-babel和gulp-uglify将ES6语法进行转换并压缩

gulp-babel将ES6语法进行转换

1. 在文件终端安装gulp-babel插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-babel

2. 在gulpfile.js文件中引用插件gulp-babel

//引用gulp-babel插件
const babel = require('gulp-babel');

3. 在gulpfile.js文件调用插件gulp-babel实现将将ES6语法进行转换

gulp.task('jsmin',(callback)=>{
    //选择js目录下所有的js文件
    gulp.src('./src/js/*.js')
    .pipe(babel({
    //判断当前代码的运行环境，将代码转换为当前环境支持运行的代码
        presets:['@babel/env']
    }))
    //输出文件到dist文件
    .pipe(gulp-dest('dist/js'))
})

4. 运行

gulp jsmin

gulp-uglify对js文件进行压缩

1. 在文件终端安装gulp-uglify插件

PS C:\Users\谢滋恩\Desktop\3.18\Gulp使用> npm install gulp-uglify

2. 在gulpfile.js文件中引用插件gulp-uglify

//引用gulp-uglify插件
const uglify= require('gulp-uglify');

3. 在gulpfile.js文件调用插件gulp-uglify实现将将ES6语法进行转换

gulp.task('jsmin',(callback)=>{
    //选择js目录下所有的js文件
    gulp.src('./src/js/*.js')
    .pipe(babel({
    //判断当前代码的运行环境，将代码转换为当前环境支持运行的代码
        presets:['@babel/env']
    }))
    //对所有js文件进行压缩
    .pipe(uglify())
    //输出文件到dist文件
    .pipe(gulp.dest('dist/js'));
    callback();
})

4. 运行

gulp jsmin

copy复制目录

通过gulp.task()创建了一个copy任务 ,通过使用gulp.src()获取src下面的images和lib目录使用gulp.dest()导出到dist目录

gulp.task('copy',callback=>{
//创建了一个copy任务
    gulp.src('./src/images/*')
//gulp.src()获取src下面的images和lib目录
    .pipe(gulp.dest('./dist/images'))
//gulp.dest()导出到dist目录
    gulp.src('./src/js/*')
    .pipe(gulp.dest('./dist/js'))
    callback();
})

default任务执行全部构建任务

gulp.task('defalut',gulp.series('first','htmlmin','cssmin', 'copy'))
//gulp.series()用于顺序执行任务