利用gulp处理简单的前端问题

PumpkinDylan 发布于2019-08-29 11:28 / 514人阅读

摘要：利用处理和或者或者文件目录项目根目录安装包依赖之后自动生成的编译后的文件放到这里安装包依赖在中到项目目录，然后会自动安装里面写的插件，根据自己项目所需要的插件来安装下面是我的项目的一些依赖清除文件合并文件编

利用gulp处理js和less或者sass或者css

文件目录

/项目根目录
-gulpfile.js
-package.json
-/images
-/src
--/less
--/js
--*.html

//-node_modules//安装包依赖之后自动生成的

//--/web//编译后的文件放到这里

安装包依赖

在git bash中cd到项目目录，然后

npm install

会自动安装package.json里面写的插件，根据自己项目所需要的插件来安装,下面是我的项目的一些依赖

{
  "name": "ionic-project",
  "version": "1.0.0",
  "description": "An Ionic project",
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.1",//清除文件
    "gulp-concat": "^2.6.0",//合并文件
    "gulp-less": "^3.0.5",//编译less，如果是sass还需要一个node的库才能编译
    "gulp-minify-css": "^1.2.3",//压缩css
    "gulp-rename": "^1.2.2",//重新命名
    "gulp-template": "^3.1.0",//模板，这个可以替换一些关键字
    "gulp-uglify": "^1.5.3"//js压缩混淆
  }
}

编写项目的gulpfile.js

var gulp = require("gulp"),
    minifycss = require("gulp-minify-css"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    less = require("gulp-less"),
    gclean = require("gulp-clean"),
    template = require("gulp-template");
var data = {cssLink: "css/main.css",jsLink: "js/main.min.js"};//资源路径，一会会用template 来替换
gulp.task("clean", function() {
   return gulp.src("web", {read: false})
        .pipe(gclean());
});
gulp.task("minifycss", function() {
    gulp.src("src/less/*.less")
        .pipe(less())
        .pipe(minifycss())   //执行压缩
        .pipe(gulp.dest("web/css"));  //输出文件夹

});
gulp.task("minifyjs", function() {
    gulp.src("src/js/*.js")
        .pipe(concat("main.js"))    //合并所有js到main.js
        .pipe(rename({suffix: ".min"}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest("web/js"));  //输出
});
gulp.task("watch", function() {//监听文件的变化
    gulp.watch("src/less/*.less", ["minifycss"]);
    gulp.watch("src/js/*.js", ["minifyjs"]);
    gulp.watch("src/*.html", ["temp"]);
});


gulp.task("temp", function () {
    return gulp.src("src/*.html")
        .pipe(template(data))
        .pipe(gulp.dest("web"));
});
gulp.task("default", ["clean"], function(){
    gulp.start("minifycss", "minifyjs","images","temp","watch");
});

然后直接 gulp运行就会默认执行default这个任务，然后就会一直监听文件的改动.

图片压缩

可以使用gulp的插件来压缩，但是个人觉得还是用其他方法比较好，所以我把images放到了源码外
推荐两个压缩图片的网站tinypng 智图
压缩图片在上线之前做就可以了

其他

还可以在这个流程中加入es6的编译，需要两个库
还可以自动添加css前缀
等等

现在webpack很火，不过，对于简单的项目来说gulp更适合

公众号

我们的主页

服务器托管云服务器简单的web开发问题前端简单吗前端开发简单吗问题处理

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

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

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

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

weakish 2019-08-21 14:27 评论0 收藏0
利用 Gulp 处理前端工作流程

摘要：基本用法基本根据匹配文件，返回，可以通过方法传递给后续的插件。一般用法，把中的内容按照指定的写成文件，会自动创建不存在的文件夹。，用来代理请求，可以把发送到指定的地址。常用于开发，作用同上，也用于匹配资源，但用起来简单很多。基本用法 // gulpfile.js gulp.task(foo, function() { gulp.src(glob) .pipe(...

Yangder 2019-08-21 10:37 评论0 收藏0
webpack 3 零基础入门教程 #1 - 介绍

摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先来说一下 webpack 是什么。 webpack 的...

张红新 2019-08-21 17:55 评论0 收藏0
精读《如何编译前端项目与组件》

摘要：历史上由于是作为的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包或，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比弱，基本上只能合并，但不能理解模块概念。 1 引言说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如：通过 webpack / parcel / gulp 构建项目。通过 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 评论0 收藏0
用gulp+mock实现前后端分离

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

dailybird 2019-08-20 18:08 评论0 收藏0