gulp学习

た入场券 2021-08-13 16:17 351阅读 0赞

gulp基本使用

目录介绍： src存放项目源文件   dist存放压缩转化的文件

针对html压缩抽取，css转换压缩，js转化压缩，普通文件的复制

const gulp = require('gulp')
        // html压缩抽取
    const htmlmin = require('gulp-htmlmin')
    const fileinclude = require('gulp-file-include');
    // less->css转化压缩
    const less = require('gulp-less');
    const csso = require('gulp-csso');
    // js转化压缩
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    // require来的是gulp中的exports对象，
    // 通过gulp.task来建立任务
    // 1:任务名称
    // 2：任务的回调函数
    gulp.task('first', done => {
        console.log('人生的第一个gulp任务')
        done()
            // 使用gulp.src获取要处理的文件
        gulp.src('./src/css/article.css')
            // 将处理后的文件输出到哪里
            .pipe(gulp.dest('./dist/css'))
    });
    // html任务：
    // 1：html中的代码压缩
    // 2：html公共样式的抽取
    gulp.task('htmlmin', done => {
        done()
        gulp.src('./src/*.html')
            .pipe(fileinclude())
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest('./dist'))
    
    });
    // 2： css任务
    // 2.1： less转化为css
    // 2.2： 压缩css
    gulp.task('cssmin', done => {
        done()
        gulp.src(['./src/css/*.less', './src/css/*.css'])
            .pipe(less())
            .pipe(csso())
            .pipe(gulp.dest('./dist'))
    });
    // js压缩打包
    gulp.task('jsbabel', done => {
            done();
            gulp.src('./src/js/*.js')
                .pipe(babel({
                    // 可以判断当前代码的运行环境，将代码转化为当前环境所支持的代码
                    presets: ['@babel/env']
                }))
                .pipe(uglify())
                .pipe(gulp.dest('./dist'))
        })
        // 复制文件夹
    gulp.task('copy', done => {
        done()
        gulp.src('./src/images/*')
            .pipe(gulp.dest('./dist/images'))
        gulp.src('./src/lib/*')
            .pipe(gulp.dest('./dist/lib'))
    });
    // 构建任务
    gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsbabel', 'copy', function() {
        // Do something after a, b, and c are finished.
        console.log('成功构建gulp任务');
    }))

使用gulp，就是在利用第三方包做一个总的规整

第三方包：下载，引用，使用

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 gulp

gulp是基于node的自动化构建工具 gulp能干啥？1.压缩JS、css文件2.合并文件3.自动编译SASS4.自动压缩图片5.保存时自动刷新浏览器 npm

r囧r小猫/ 2023年08月17日 15:17/ 0 赞/ 182 阅读

相关 Gulp - 学习/实践

1.应用场景 <table> <tbody> <tr> <td> <p>了解学习前端项目开发中用到的前端模块管理器之一 Gulp，并且利用其进行前端项目的开

Myth丶恋晨/ 2022年12月08日 05:20/ 0 赞/ 160 阅读

相关 gulp教程之gulp-less

简介：使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

妖狐艹你老母/ 2022年09月25日 04:16/ 0 赞/ 298 阅读

相关 gulp详细教程---学习总结

gulp介绍 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；可

﹏ヽ暗。殇╰゛Y/ 2022年09月21日 13:21/ 0 赞/ 264 阅读

相关 gulp详细学习教程

对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有

不念不忘少年蓝@/ 2022年08月23日 05:41/ 0 赞/ 241 阅读

相关 gulp插件/gulp模块

1、gulp 介绍：[http://www.gulpjs.com.cn/docs/getting-started/][http_www.gulpjs.com.cn_docs

雨点打透心脏的1/2处/ 2022年06月06日 01:20/ 0 赞/ 533 阅读

相关 gulp

jasmine jasmine是一个行为驱动开发的测试框架，不依赖任何js框架以及dom，是一个非常干净的以及友好的API的测试库 describe函数来定义

喜欢ヅ旅行/ 2022年05月24日 12:44/ 0 赞/ 269 阅读

相关什么是Gulp？如何使用Gulp

什么是Gulp？如何使用Gulp Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可

淡淡的烟草味﹌/ 2022年05月14日 01:30/ 0 赞/ 386 阅读

相关 $ gulp bash: gulp: command not found

1. 将路径：C:\\Users\\Administrator下的nmprc文件 ![70][] 内容修改为：（node安装的位置）：prefix=F:\\Javaweb\

川长思鸟来/ 2022年05月09日 11:52/ 0 赞/ 353 阅读

相关 gulp学习

gulp基本使用目录介绍： src存放项目源文件 dist存放压缩转化的文件针对html压缩抽取，css转换压缩，js转化压缩，普通文件的复制 co

た入场券/ 2021年08月13日 16:17/ 0 赞/ 352 阅读