前端从零单排之Gulp(第二期)

xiaolinbang 发布于2019-08-21 12:17 / 1226人阅读

摘要：是个类似于的前端工作流工具，今天就简单的介绍一下和一些我的使用感受在中安装全局切换到你的前端工作目录下确保你的前端工作目录下有这个文件然后就已经安装好了，马上就可以进入简单的配置了。但是在使用的工作之中会遇到一些问题。

gulp 是个类似于grunt的前端工作流工具，今天就简单的介绍一下gulp和一些我的使用感受

Installing gulp

在Terminal中安装全局gulp

npm install -g gulp

切换到你的前端工作目录下

npm install gulp --save-dev

Tips: 确保你的前端工作目录下有package.json这个文件

然后gulp就已经安装好了，马上就可以进入简单的配置了。

Simple

// Include gulp
var gulp = require("gulp");

// Include plugins
var less = require("less");

// Register task
gulp.task("less", function(){
  gulp.src("src/less/*.less")
      .pipe(less())
      .pipe("dest/css/main.css");
})
// Task default
gulp.task("default", function(){
    gulp.run("less");
})

以上即是gulp的简单例子了，相比于grunt的配置，只能说真心简单了好几个数量级。

Install gulp plugins

Less compile (gulp-less)

Autoprefixer (gulp-autoprefixer)

Minify CSS (gulp-minify-css)

JSHint (gulp-jshint)

Concatenation (gulp-concat)

Uglify (gulp-uglify)

Compress images (gulp-imagemin)

LiveReload (gulp-livereload)

Clean files for a clean build (gulp-clean)

Caching of images so only changed images are compressed (gulp-cache)

Notify of changes (gulp-notify)

Tips: 每个gulp plugin 使用方法可在https://www.npmjs.org/package/gulp-，即为你要插件，如 https://www.npmjs.org/package/gulp-less 就是gulp-less的使用方法

gulp零零碎碎介绍的就这些了，想了解如何使用coffee配置gulp文件，以及比较复杂gulp流配置的可以参考下面参考文章中的gulpjs 配置文件。

使用心得：使用gulp近10来天的时间，感觉相对于grunt来说gulp的任务配置这块完全完胜，而且现在gulp目前的插件也完全能满足工作的需求。但是在使用gulp的工作之中会遇到一些问题。首先gulp是基于stream工作的，一旦出错就需要人肉重新启动。

以上即全文，希望对大家能有帮助。

参考文章

gulpjs 中文简介

gulpjs 配置文件

getting started with gulpjs

gulpjs API

gulpjs plugins list

GPU云服务器云服务器 java大神班第二期从零开始搭建前端数据监控系统单排 gulp

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

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

从零单排之CSS3

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

刘福 2019-08-28 17:59 评论0 收藏0
前端从零单排之AJAX(第一期)

摘要：作为一个有追求的前端，这是不可以接受的。两大特性在不刷新页面的情况下向服务器端发送请求从服务器端接收数据，并进行对应的逻辑处理请求流程首先先建立一个异步请求对象第一步的对象设置已经好了。在闭包中进行相关的操作。 ajax的使用一直是以jQuery为主，对于底层的实现有点不明觉厉。作为一个有追求的前端，这是不可以接受的。便让我们今晚好好走进ajax的内心世界。 ajax 两大特性： ...

Mertens 2019-08-21 12:17 评论0 收藏0
前端从零单排之LESS（第四期)

摘要：函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。适当嵌套，以保持的优雅。有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站，能够实时看到效果。 LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootst...

Drummor 2019-08-28 17:55 评论0 收藏0
阅读gulp源码小结

摘要：源码简介源码核心部分寥寥行。同时本身是直接继承于模块。写在末尾阅读代码的这一次，是我第一次阅读这种开源的模块化项目。深深的被震撼到了，认识到了模块化的巨大力量。就能完成非常复杂的事情，而不需要凡是亲力亲为，一行行代码，一个个小问题依次解决。 gulp源码简介 gulp源码核心部分寥寥60+行。但是通过这60+行代码，gulp给我们带来的确是前端自动化构建的便利。以往以为其源码肯定蛮复杂...

Rocture 2019-08-21 14:05 评论0 收藏0
从零开始单排学设计模式「UML类图」定级赛

摘要：从零开始单排学设计模式的国服排位之旅，今天正式开启目前段位定级赛这篇文章来总结下类图，本来不打算讲类图的，因为我在学习设计模式的时候，一遇到有关的就会自动忽略，一看感觉就很复杂。关联关系用实现箭头来表示。阅读本文大概需要 3.5 分钟。本篇是设计模式系列的开篇，虽然之前也写过相应的文章，但是因为种种原因后来断掉了，而且发现之前写的内容也很渣，不够系统。所以现在打算重写，加上距离现...

Loong_T 2019-08-16 15:04 评论0 收藏0