第三方模块Gulp的基本使用方法

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_45672719/article/details/102710292

gulp

1. gulp的安装:

1. 定位终端到项目目录 执行 npm install gulp -s 本地安装gulp的库文件
2. 执行 npm install gulp-cli -g 全局安装gulp的命令行工具

2. gulp能做什么

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

3. gulp的使用

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

4. gulp中提供的方法

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

5.gulp的插件:

1. gulp-htmlmin：html文件压缩 gulp-csso：压缩css
2. gulp-babel：JavaScript语法转化（ES6转ES5）
3. gulp-less：less语法转化
4. gulp-uglify：压缩混淆JavaScript
5. gulp-file-include：公共文件包含 (解决相同代码重复的问题)
6. browsersync：浏览器实时同步

//引入gulp模块
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')
// const csso = require('gulp-csso')
//使用gulp.task('任务名称',回调函数)建立任务
gulp.task('first',()=>{
    console.log('执行第一个gulp任务')
    //使用gulp.src()获取要处理的文件
    gulp.src('./src/css/base.css')
    //.pipe()处理
    //使用gulp.dest()输出文件
        .pipe(gulp.dest('dist/css'))
})

//html任务
//1.html代码中文件的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    gulp.src('./src/*.html')
        //压缩之前要先
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'))
})

//less转css
//压缩css文件
gulp.task('cssmin', () =>{
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        .pipe(less())   
        .pipe(csso())
        .pipe(gulp.dest('./dist/css/'));
})

//js语法转换和压缩
gulp.task('jsmin', () =>
    gulp.src('src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .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'])