Gulp自动化流程

最新推荐文章于 2022-11-12 12:19:06 发布
最新推荐文章于 2022-11-12 12:19:06 发布
阅读量157 收藏
点赞数
分类专栏： 知识点回顾
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39748755/article/details/98252171
版权

一、gulp的安装

  • 全局安装gulp

cnpm install gulp@3 -g 

cnpm install gulp@3 -D

  • 检查gulp版本

 gulp --version

  • 创建配置文件

 在项目根目录下创建一个名为 gulpfile.js 的文件，内容如下

var gulp = require('gulp'); //告知Node去node_modules中查找gulp包

gulp.task('default', function() {

  // 要执行的默认任务代码

console.log('gulp启动成功');//测试gulp是否启动

});

  • 运行gulp

在项目根目录下执行 gulp命令即可执行任务名为default的默认任务。

二、gulp的使用

gulp.task(),gulp.src(),gulp.dest(),gulp.watch(),

  1. gulp.task()方法，用来定义任务，即你要使用gulp做什么
  2. gulp.src()方法， 用来获取流，即读取你需要操作的文件。

gulp.src().pipe()方法，用来把流导入到你想要的地方

  1. gulp.dest() 方法是用来写文件，比如合并/压缩/转译后的文件生成到哪里。
  2. gulp.watch()方法，用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等 
    var gulp = require('gulp');//导入gulp模块
var webpack = require('webpack-stream'); //导入js打包模块（webpack）
var $ = require('gulp-load-plugins')();

//对首页进行全套转译和打包
gulp.task("index", () => {
    //创建压缩参数对象
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面中的JS
        minifyCSS: true // 压缩页面中的CSS
    };
    //首页html文件
    gulp.src('src/index.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/'));
    //详情页html文件
    gulp.src('src/index/other.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/pages'));

    //首页less文件
    gulp.src('src/index.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css
    //详情页less文件
    gulp.src('src/index/other.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css

    gulp.src("src/index.js")// ES6 源码存放的路径
        .pipe(webpack({
            // 这里写webpack的配置
            mode: "development", //以开发模式进行打包（如果以生成模式进行打包就会自动的压缩）development(开发) production(生产)
            //多入口文件导入
            entry: {
                index: './src/index.js',
                other: './src/index/other.js'
            },
            output: {
                filename: '[name].js' //打包输出的文件名
            },
            module: {
                rules: [
                    { test: /\.js$/, use: ['babel-loader'] }, //使用webpack的加载器来转译js语法
                ]
            },
        }))
        .pipe(gulp.dest('dist/js')) //生成经过插件处理后的文件

    gulp.src("src/index/images/*.*")
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest("dist/images/index"))
});

//后台管理页面进行全套转译和打包
gulp.task('backstage', () => {
    //创建压缩参数对象
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面中的JS
        minifyCSS: true // 压缩页面中的CSS
    };
    gulp.src('src/backstage/backstage.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/pages'));

    gulp.src('src/backstage/backstage.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css

    gulp.src("src/backstage/backstage.js")// ES6 源码存放的路径
        .pipe(webpack({
            // 这里写webpack的配置
            mode: "development", //以开发模式进行打包（如果以生成模式进行打包就会自动的压缩）development(开发) production(生产)
            //多入口文件导入
            entry: {
                backstage: './src/backstage/backstage.js'
            },
            output: {
                filename: '[name].js' //打包输出的文件名
            },
            module: {
                rules: [
                    { test: /\.js$/, use: ['babel-loader'] }, //使用webpack的加载器来转译js语法
                ]
            },
        }))
        .pipe(gulp.dest('dist/js')) //生成经过插件处理后的文件

    gulp.src("src/backstage/images/*.*")
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest("dist/images/backstage"))
});

//家长端页面进行全套转译和打包
gulp.task("parent", () => {
    //创建压缩参数对象
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面中的JS
        minifyCSS: true // 压缩页面中的CSS
    };
    gulp.src('src/parent/parent.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/pages'));

    gulp.src('src/parent/parent.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css

    gulp.src("src/parent/parent.js")// ES6 源码存放的路径
        .pipe(webpack({
            // 这里写webpack的配置
            mode: "development", //以开发模式进行打包（如果以生成模式进行打包就会自动的压缩）development(开发) production(生产)
            //多入口文件导入
            entry: {
                parent: './src/parent/parent.js'
            },
            output: {
                filename: '[name].js' //打包输出的文件名
            },
            module: {
                rules: [
                    { test: /\.js$/, use: ['babel-loader'] }, //使用webpack的加载器来转译js语法
                ]
            },
        }))
        .pipe(gulp.dest('dist/js')) //生成经过插件处理后的文件

    gulp.src("src/parent/images/*.*")
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest("dist/images/parent"))
})

//学校端页面进行全套转译和打包
gulp.task("school", () => {
    //创建压缩参数对象
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面中的JS
        minifyCSS: true // 压缩页面中的CSS
    };
    gulp.src('src/school/school.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/pages'));

    gulp.src('src/school/school.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css

    gulp.src("src/school/school.js")// ES6 源码存放的路径
        .pipe(webpack({
            // 这里写webpack的配置
            mode: "development", //以开发模式进行打包（如果以生成模式进行打包就会自动的压缩）development(开发) production(生产)
            //多入口文件导入
            entry: {
                school: './src/school/school.js'
            },
            output: {
                filename: '[name].js' //打包输出的文件名
            },
            module: {
                rules: [
                    { test: /\.js$/, use: ['babel-loader'] }, //使用webpack的加载器来转译js语法
                ]
            },
        }))
        .pipe(gulp.dest('dist/js')) //生成经过插件处理后的文件

    gulp.src("src/school/images/*.*")
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest("dist/images/school"))
})

//教师端页面进行全套转译和打包
gulp.task("teacher", () => {
    //创建压缩参数对象
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面中的JS
        minifyCSS: true // 压缩页面中的CSS
    };
    gulp.src('src/teacher/teacher.html')
        .pipe($.htmlmin(options))
        .pipe(gulp.dest('dist/pages'));

    gulp.src('src/teacher/teacher.less') // 该任务针对的文件
        .pipe($.less()) // 转义less
        .pipe($.cleanCss()) // 压缩css
        .pipe(gulp.dest('dist/css')); // 将会在dist/css下生成test.css

    gulp.src("src/teacher/teacher.js")// ES6 源码存放的路径
        .pipe(webpack({
            // 这里写webpack的配置
            mode: "development", //以开发模式进行打包（如果以生成模式进行打包就会自动的压缩）development(开发) production(生产)
            //多入口文件导入
            entry: {
                teacher: './src/teacher/teacher.js'
            },
            output: {
                filename: '[name].js' //打包输出的文件名
            },
            module: {
                rules: [
                    { test: /\.js$/, use: ['babel-loader'] }, //使用webpack的加载器来转译js语法
                ]
            },
        }))
        .pipe(gulp.dest('dist/js')) //生成经过插件处理后的文件

    gulp.src("src/teacher/images/*.*")
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest("dist/images/teacher"))
})

//第三方全套转译和打包
gulp.task("lib", () => {
    gulp.src('src/lib/bootstrap/*.*') // 该任务针对的文件
        .pipe(gulp.dest('dist/lib/bootstrap')) //生成经过插件处理后的文件

    gulp.src('src/lib/jquery/*.*') // 该任务针对的文件
        .pipe(gulp.dest('dist/lib/jquery')) //生成经过插件处理后的文件

    gulp.src('src/lib/layui/**/*') // 该任务针对的文件
        .pipe(gulp.dest('dist/lib/layui')) //生成经过插件处理后的文件

    gulp.src('src/lib/echarts/*.*') // 该任务针对的文件
        .pipe(gulp.dest('dist/lib/echarts')) //生成经过插件处理后的文件

    gulp.src('src/lib/jigsaw/*.*') // 该任务针对的文件
        .pipe(gulp.dest('dist/lib/jigsaw')) //生成经过插件处理后的文件
})

gulp.task('default', () => {
    gulp.start("index", "backstage", "parent", "school", "teacher", "lib")
    // 首页执行的默认任务代码
    gulp.watch("src/*.*", ["index"]);
    gulp.watch("src/index/*.*", ["index"]);
    gulp.watch("src/index/*/*.*", ["index"]);

    // 后台管理页面执行的默认任务代码
    gulp.watch("src/backstage/*.*", ["backstage"]);
    gulp.watch("src/backstage/*/*.*", ["backstage"]);

    // 家长端页面执行的默认任务代码
    gulp.watch("src/parent/*.*", ["parent"]);
    gulp.watch("src/parent/*/*.*", ["parent"]);

    // 学校端页面执行的默认任务代码
    gulp.watch("src/school/*.*", ["school"]);
    gulp.watch("src/school/*/*.*", ["school"]);

    // 教师端页面执行的默认任务代码
    gulp.watch("src/teacher/*.*", ["teacher"]);
    gulp.watch("src/teacher/*/*.*", ["teacher"]);
});

     

 

tjh0001
关注
专栏目录
【 工具 】Gulp基础使用
zwj
05-13 80
安装Gulp 全局安装 npm install gulp -g 安装到本地文件 npm install gulp --save-dev 目录结构 必须在 gulpfile.js 里面写gulp执行的任务部分 其他需要安装的模块 安装gulp-sass: npm install gulp-sass --save-dev 安装js压缩插件 npm install gulp-uglify --save-dev 安装文件合并插件 npm install gulp-concat --save-
Gulp学习之委以重任task函数做了什么事情
weixin_45147894的博客
03-24 215
gulp.task()函数用来定义一个gulp要执行的任务。其格式如下 gulp.task(name [, deps] [, fn]) 该函数有三个参数：name，deps和fn name任务的名称，字符串类型，这个参数是必须的。 gulp.task('mytask') 执行该任务 gulp] # gulp mytask Starting 'mytask'... Finished 'mytask' after 120 μs 我们定义的这个任务其实什么也没有做。通常情况下是需要有一个回调函数.
gulp 执行default任务时报错: AssertionError [ERR_ASSERTION]: Task function must be specified
Andrew_SJ的博客
04-15 759
在执行gulp命令时报错， AssertionError [ERR_ASSERTION]: Task function must be specified 解决方法： 1.先使用 gulp -v 检查gulp版本 查看gulp的Local version版本和package.json里面的版本是否相同 如果是版本号相同，是4.0版本编写的代码有误。 我原来错误的gulp代码块的写法为： gulp.task(“less”,() => { // default task code here });
gulp创建默认任务（九）
最新发布
xiaojian044的博客
11-12 246
创建默认任务
gulp的使用
m0_55836496的博客
09-17 895
Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程,页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。node中的第三方包,通过npm下载gulp 是node中的第三方模块gulp.task(任务名,回调函数)gulp.src(文件路径) 设置文件的路径gulp.pipe() 管道方法 将文件流输出到指定的方法中。
gulp自动化
08-13
在gulp自动化流程中，这些模板文件可能会被处理，例如预编译、注入动态数据或者压缩，以提高页面加载速度。 `assets`目录则通常存放静态资源，如CSS、JavaScript、图片等。gulp可以帮助开发者管理和优化这些资源。...
Gulp自动化工具
12-24
1.1自动化 - gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。 1.2与平台无关 - 集成内置于所有主要IDE中，人们正在使用gulp与PHP，.NET，Node.js，Java和其他平台。 1.3强大的生态系统 - ...
Gulp前端自动化构建工具
01-08
1. **提高效率**：Gulp的自动化流程可以节省手动执行重复任务的时间，让开发者专注于代码编写。 2. **易用性**：Gulp基于Node.js，其语法简单直观，易于理解和学习。 3. **快速构建**：Gulp利用流式处理（stream-...
gulp学习
不想起床
10-24 212
gulp基本使用 目录介绍： src存放项目源文件 dist存放压缩转化的文件 针对html压缩抽取，css转换压缩，js转化压缩，普通文件的复制 const gulp = require('gulp') // html压缩抽取 const htmlmin = require('gulp-htmlmin') const fileinclude = require('gul...
gulp.task
雾里看花叹朦胧
10-27 8268
gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为： gulp.task(name[, deps], fn)name: 为任务名 deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数 fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是
gulp中报错 Task 'default' is not in your gulpfile 的解决方式
hkLe7的博客
07-08 8173
gulp使用中的常见问题
gulp default任务报错 Task function must be specified
缚己
12-25 520
gulpfile.js 文件： gulp.task('default', ['init', 'css_min', 'less_css', 'es6_es5', 'js_min']) 报错： 这是因为，使用 task 命令批量运行 gulp 任务只支持 gulp 4- 版本，对于 4.0 及以上的版本不能使用这种方式运行，需要改成： gulp.task('default', gulp.parallel('init', 'css_min', 'less_css', 'es6_es5', 'js_min'
gulp入坑系列(3)——创建多个gulp.task
YuuyaRin的博客
12-10 8193
继续gulp的爬坑路，在准备get更多gulp的具体操作之前，先来明确一下在gulp中创建和使用多个task任务的情况。     gulp所要做的操作都写在gulp.task()中，系统有一个默认的default任务，如下： var gulp = require('gulp');//gulp自身 gulp.task('default',['task1','task2'], functi
创建多个gulp.task
m0_37978717的博客
06-22 1400
在准备get更多gulp的具体操作之前，先来明确一下在gulp中创建和使用多个task任务的情况。     gulp所要做的操作都写在gulp.task()中，系统有一个默认的default任务，如下： [javascript] view plain copy var gulp = require('gulp');//gulp自身  gulp.task('default',['ta
vscode中使用gulptask插件
ClassicSong的博客
11-22 2044
在项目中需要手动打包，每次需要在cmd中输入gulp命令，实在是不想输入了，于是gulptask插件排上了用场，只要点击按钮就可以打包。 一、vscode中查找gulptasks插件点击安装，如下图： 二、配置好项目中的gulp环境，项目目录中有gulpfile.js，我的项目gulpfile.js代码如下： var gulp = require('gulp'), concat = re...
自动化构建工具--gulp中gulpfile的基础配置
daidai0_0的博客
03-24 290
var gulp = require('gulp') less = require('gulp-less') //编译后压缩css //先安装压缩的依赖：npm install gulp-minify-css --save-dev //cssmin = require('gulp-minify-css'); //浏览器样式自动加载刷新配置1 //npm install gulp
gulp入门与一些基本设置
du_peiduo的专栏
06-03 5116
这里是gulp入门的一些操作，实现了编译sass文件、压缩、合并、添加版本号等基本功能。 友情提示，如果npm出现无法下载可以安装 cnpm。大家可以谷歌或百度如何安装cnpm 1.安装Nodejs 选择合适的版本下载Nodejs 2.安装全局gulp npm install --global gulp-cli 3.进入项目目录（之后的操作全是在此目录下进行） cd deskto
记录gulp4.0的那些坑
天马行空
02-14 2920
问题1. 在执行gulp命令时控制台报错：Task function must be specified。 解决方法： 4.0错误的写法：     gulp.task('default', ['del'], function() {         // default task code here     }); 修改为最新的正确写法：     gulp.task('default...
gulp工具的使用
qq1024884152的博客
04-24 594
一、安装 Gulp-自动化开发工具 1、 压缩js 　　2、  压缩css 　　3、  压缩less 　　4、  压缩图片 　　等等… npm install gulp -g 全局安装,安装完成后，输入gulp –v查看是否安装成功。 二、压缩javascript 1、配置文件:我将这个js文件取名叫gulpfile( 且必须取为gulpfile名，否则在node环境
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值