前端 - gulp应用

清疚 2022-01-27 08:19 188阅读 0赞

## 说明 ##

*  gulp用于搭建小的前后端分离中的前端项目还是挺合适的，如果你不使用诸如Vue、React、AngularJS等提供的脚手架框架，那么使用gulp来做js、css、图片等的压缩合并等处理就非常合适了。
 *  诸如gulp的第三方服务年年都有很大的变化，用法上变化也很大，具体用法还需要以最新的官方为准。中文官方地址：[https://www.gulpjs.com.cn/][https_www.gulpjs.com.cn]  
    笔者用到的gulp版本为：`4.0.2`

## 使用 ##

1.  `npm install gulp` // 全局安装gulp程序（必须）
2.  `npm install --save-dev gulp` // 将gulp安装到项目中（必须）
3.  在项目根目录下新建`gulpfile.js`

## 定义任务 ##

在gulpfile.js中定义定时任务，如下：

const gulp = require('gulp');
    const babel = require('gulp-babel');
    const less = require('gulp-less');
    const minCss = require('gulp-minify-css');
    const rename = require('gulp-rename');
    const uglify = require('gulp-uglify');
    const imagemin = require('gulp-imagemin');
    
    /** * 编译js * - es6转es5 * - 压缩 * - 合并 * @author Caesar Liu * @date 2019/5/25 22:38 */
    gulp.task('compileJs', function(){ 
        return gulp.src('./src/js/**/*.js')
            .pipe(babel({ 
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(rename({ 
                suffix: '.min'
            }))
            .pipe(gulp.dest("./dist/js"));
    });
    
    /** * 编译less * - less转css * - 压缩 * @author Caesar Liu * @date 2019/5/25 22:50 */
    gulp.task('compileLess', function() { 
        return gulp.src('./src/less/**/*.less')
            .pipe(less())
            .pipe(minCss())
            .pipe(rename({ 
                suffix: '.min'
            }))
            .pipe(gulp.dest('./dist/css'))
    });
    
    /** * 编译图片 * - 压缩 * @author Caesar Liu * @date 2019/5/25 22:51 */
    gulp.task('compileImages', function() { 
        return gulp.src('./src/images/**/*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/images'))
    });
    
    /** * 编译 * @author Caesar Liu * @date 2019/5/26 00:33 */
    gulp.task('compile', gulp.series(gulp.parallel('compileJs', 'compileLess', 'compileImages')));
    
    /** * 监听源文件 * @author Caesar Liu * @date 2019/5/25 22:38 */
    gulp.task('watch',function(){ 
        gulp.watch('./src/js/**/*.js', gulp.parallel('compileJs'));
        gulp.watch('./src/less/**/*.less', gulp.parallel('compileLess'));
        gulp.watch('./src/images/**/*', gulp.parallel('compileImages'));
    });
    
    gulp.task('default', gulp.series(gulp.parallel('watch')));

## 执行 ##

任务定义以后，就可以直接运行`gulp`来调用定义的`default`任务，如果需要指定任务执行，就可以使用`gulp <task name>`来执行选定的任务。

## 插件的查找和使用 ##

查找：[https://www.npmjs.com/search?q=keywords:gulpplugin][https_www.npmjs.com_search_q_keywords_gulpplugin]  
使用：点击你需要使用的插件，插件详情会有具体的使用步骤

[https_www.gulpjs.com.cn]: https://www.gulpjs.com.cn/
[https_www.npmjs.com_search_q_keywords_gulpplugin]: https://www.npmjs.com/search?q=keywords:gulpplugin

发表评论取消回复

表情：

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

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

相关阅读

相关前端构建工具gulp入门教程

本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。

浅浅的花香味﹌/ 2022年08月23日 01:00/ 0 赞/ 278 阅读

相关 gulp-前端项目自动化(工程化)

gulp对网站优化 gulp依赖插件能做什么？压缩html、js、css css、js文件名md5化压缩图片

古城微笑少年丶/ 2022年07月12日 05:48/ 0 赞/ 250 阅读

相关浅谈前端构建工具gulp

1、gulp gulp是一个前端自动化的构建工具，采用这个工具，可以提升性能和效率。 2、为什么要用gulp 1) .js和.css属于静态文件，由于浏览器存在缓存

我会带着你远行/ 2022年06月18日 05:28/ 0 赞/ 305 阅读

相关 Gulp前端构建工具

安装介绍 1.全局安装gulp npm install --global gulp 2. 作为项目的开发依赖（devDependencies）安装：(在

素颜马尾好姑娘i/ 2022年06月17日 04:00/ 0 赞/ 362 阅读

相关浅谈gulp前端工程化

为什么要做前端工程化？ 1，校验无误后，合并压缩多个js文件 2，对css文件进行编译（各种css框架，如sass less）使用工具：用git辅助cmd（

灰太狼/ 2022年06月14日 01:13/ 0 赞/ 209 阅读

相关 Gulp前端自动化工具

Gulp 当下的前端开发不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了我们要提高效率，就必须减少重复的工

傷城~/ 2022年06月13日 09:13/ 0 赞/ 309 阅读

相关 Gulp 前端构建工具

基于流 1. 安装 2. 使用 3. API 4. 常用 gulp 插件基于流 Gulp是以 Nodejs中的stream(流) 为媒介

柔光的暖阳◎/ 2022年05月26日 09:48/ 0 赞/ 273 阅读

相关前端自动化构建工具——gulp

操作过程：需要配置文件后才能执行 $ gulp命令（1）配置一些基本信息，执行命令：$ npm init 在git指令中，对下面每一项进行配置，注意：GitHub项目

一时失言乱红尘/ 2022年05月09日 11:24/ 0 赞/ 350 阅读

相关前端 - gulp应用

说明 gulp用于搭建小的前后端分离中的前端项目还是挺合适的，如果你不使用诸如Vue、React、AngularJS等提供的脚手架框架，那么使用gulp来做js、c

清疚/ 2022年01月27日 08:19/ 0 赞/ 189 阅读

相关 gulp应用

gulpjs是一个前端构建工具，与grunt相比，gulp配置参数相对简单很多，API也和简单，学习很容易，gulp使用的是nodejs中stream来读取和操作数据，其速度非

亦凉/ 2021年09月30日 06:02/ 0 赞/ 387 阅读