gulp第三方模块

前言

一、Gulp是什么？

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

将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了

用机器代替手工，提高开发效率

二、Gulp能做什么？

1.项目上线，HTML、CSS、JS文件压缩合并

2.语法转换（es6、less ...）

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任务

/* 
npm install gulp
 npm install gulp-cli -g
引用gulp包：const gulp = require('gulp');
使用gulp.task建立任务
1.任务名称
2.任务的回调函数 */
gulp.task('first',()=>{
    console.log('qwertyuioo我们哈哈哈');
    //1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'));
});

gulp.watch()：监控文件的变化

五.Gulp插件

gulp-htmlmin ：html文件压缩

gulp-csso ：压缩css

gulp-babel ：JavaScript语法转化

gulp-less: less语法转化

gulp-uglify ：压缩混淆JavaScript

gulp-file-include 公共文件包含

browsersync 浏览器实时同步

示例代码：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
/* 
npm install gulp
 npm install gulp-cli -g
使用gulp.task建立任务
1.任务名称
2.任务的回调函数 */
gulp.task('first',()=>{
    console.log('qwertyuioo我们哈哈哈');
    //1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'));
});
/* 
 npm install gulp-htmlmin
gulp htmlmin
html任务
1.html文件中代码的压缩操作
2.抽取html文件中的公共代码
 */
gulp.task('htmlmin',()=>{
    gulp.src('./src/*.html')
    .pipe(fileinclude())
    //压缩html文件中的代码
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist'))
})
/* 
npm install gulp-less
    css任务
    1.less语法转换
    2.css代码压缩
    gulp cssmin
*/
gulp.task('cssmin',()=>{
    gulp
    // .src('./src/css/*.less')
    // 选择css目录下所有less文件以及css文件
        .src(['./src/css/*.less','./dist/css/*.css'])
        //将less语法转换为css语法
        .pipe(less())
        //压缩css文件中的代码 npm install gulp-csso
        .pipe(csso())
        //将处理的结果输出
        .pipe(gulp.dest('dist/css'))
})

/*
 
js任务
npm install --save-dev gulp-babel @babel/core @babel/preset-env
gulp jsmin
1.es6代码转换
npm install --save-dev gulp-uglify
2.代码压缩

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

});
/* 
    复制文件夹
*/
gulp.task('copy',()=>{
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
})
/* 
    构建任务
*/
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);

总结