使用gulp自动化前端工作流

HelKyle 发布于2019-08-19 17:16 / 939人阅读

摘要：安装推荐安装到项目目录，不推荐全局目录，因为后期会自动引入项目相关的支持包，如果全局安装，这些支持包全都安装在下，不利于管理，可能易引起冲突。

安装gulp

gulp推荐安装到项目目录，不推荐全局目录，因为后期gulp会自动引入项目相关的支持包，如果全局安装gulp，这些支持包全都安装在/usr/local/lib/node_modules/下，不利于管理，可能易引起冲突。

npm install gulp

安装常用插件

// js压缩
gulp-uglify
// css压缩
gulp-clean-css
// 重命名
gulp-rename
// 合并文件
gulp-concat
// 捕获错误
gulp-plumber
// 打包
gulp-zip
//过率console信息
gulp-strip-debug

在gulpfile.js中载入插件

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");
var plumber  = require("gulp-plumber");
var zip = require("gulp-zip");
var browserSync = require("browser-sync");

自动压缩css重命名

定义一个任务compress-css,压缩static文件夹下面的index.css,并且重命名为index.min.css,保存到build文件夹下面

gulp.task("compress-css", function() {
    gulp.src("static/index.css")
        .pipe(minifyCss())
        .pipe(rename("index.min.css")) 
        .pipe(gulp.dest("build"));
});

自动压缩js代码并且重命名

定义一个任务compress-js,压缩static文件夹下面的index.js,并且重命名为index.min.js,保存到build文件夹下面

gulp.task("compress-js", function() {
    gulp.src("static/index.js")
        .pipe(uglify())
        .pipe(rename("index.min.js")) 
        .pipe(gulp.dest("build"));
});

自动合并文件

合并src下面的js文件，重命名为all.js，保存在build文件夹下面

gulp.task("minify", function (){
     return gulp.src("src/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("build"))
});

执行某个任务

gulp teskname

监视文件变化

这里定义一个默认的任务，只需要在gulp里面输入gulp

gulp.task("default", function(){
    gulp.watch("src/*.*", function(){
        gulp.run("teakname")
    });
});

打包发布任务

新建任务zip，将build文件夹下面的文件全部打包为publish.zip,发布到release文件夹下面

gulp.task("zip", function(){
    return gulp.src("build/*")
        .pipe(plumber())
        .pipe(zip("publish.zip"))
        .pipe(gulp.dest("release"))
});

自动刷新浏览器

新建任务start，启用一个本地server，监视当前目录下的所有文件，一旦文件变化，浏览器reload

gulp.task("start", function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./*", function() {
        browserSync.reload();
    });
})

在build任务中过滤目标文件中的console.log();

var stripDebug = require("gulp-strip-debug");
gulp.task("build", function () {
        .gulp.src()
        .pipe(stripDebug())
        .pipe(gulp.dest());
});

监听gulp任务结束,执行回调

gulp.task("dev", function(){
    gulp.src(src)
        .pipe(rename("app.js"))
        .on("end",function(){
           console.log("这里是回调")
        })

});

海外云主机服务器托管前端工作 web前端好找工作吗前端自动化 web前端自动化测试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78362.html

gulp-work-flow 前端工作流原来可以这么简单

摘要：话不多说，今天的主题是使用打造传统项目的前端工作流。是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。这意味着，你可以用的方式编写程序，又不用担心现有环境是否支持。概述最近前端一直是一个火热的话题，前端技术栈也是伴随着nodejs的出现而更替的飞快，导致大部分前端开发者曾一度迷茫在这各种技术选型上，比如前端自动化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 评论0 收藏0
前端团队 Gulp & Webpack 工作流 迁移记

摘要：那时候所配置的任务监听匹配文件的变化自动刷新浏览器自动编译自动补全前缀多雪碧图合并拼图等等基于编译图片的任务，已经是完全满足我们的需求了。直至到后来在雪碧图的合并，多倍图的输出上，在上苦苦找寻不了比较完美的解决方案等等。折腾从 2015 到现在，短短的三年内，几乎每年折腾一下工作流的更新换代。从最早开始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...

Baaaan 2019-08-20 17:17 评论0 收藏0
前端基础工作流：sass自动化编辑成css

摘要：目前提供了观察文件变化，自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译，就需要使用工具进行处理。启动提示打开编辑器编辑下文件，保存，查看下文件，已经编译好了。目前sass提供了观察文件变化，自动将sass文件编译成css的功能。但在有些机子上跟踪编译非常慢。使用不便。如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。...

W4n9Hu1 2019-08-30 12:59 评论0 收藏0
Javascript五十问——从源头细说Webpack与Gulp

摘要：前言与是目前圈子内比较活跃的前端构建工具。对于初学者来说，对这二者往往容易认识不清，今天，就从事件的源头，说清楚与。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。打包后形成的文件出口。前言：Webpack 与 gulp是目前圈子内比较活跃的前端构建工具。网上有很多二者比较的文章，面试中也会经常遇到gulp，Webpack的区别这样的问题。对于初学者来说，对这二...

lwx12525 2019-08-23 14:47 评论0 收藏0
做一个合格的前端，gulp资源大集合

摘要：承接前一篇做一个合格的前端，自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术，如全文索引自定义富文本编辑器图片上传压缩水印等等。承接前一篇《做一个合格的前端，gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网：http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

Baoyuan 2019-08-22 13:54 评论0 收藏0