资讯专栏INFORMATION COLUMN

简简单单学习gulp的入门与使用

meteor199 / 2971人阅读

摘要:的使用首先,我们需要在官网下载插件,地址如下在这个网站我们可以寻找到自己需要的插件以为例,然后在项目下打开命令提示行,输入以下命令然后我们在里输入一下代码引入插件调用插件输出位置

gulp的入门与使用

安装

使用

gulp的入门 安装

安装gulp需要使用到nodo.js,安装链接如下:
http://jingyan.baidu.com/arti...

安装完成之后我们以全局安装gulp
打开命令提示行,输入以下命令:

npm install gulp-cli -g

然后我们建立自己的项目
在自己的项目目录下,打开命令提示行,因为我们需要
" package.json "文件,所以我们需要输入以下命令:

npm init

之后我们需要在项目目录下安装gulp
输入以下命令

npm install gulp -D

我们还需要自己手动建立一个gulpfile.js文件,
打开gulpfile.js,输入以下代码:

var gulp = require("gulp");
// 引入gulp
gulp.task("default", function() {
  console.log("测试");
});

在刚刚的命令提示行输入:

gulp

得到以下输出

Using gulpfile F:webgulpfile.js
Starting "default"...
测试
Finished "default" after

说明你的gulp已经安装成功。

gulp的使用

首先,我们需要在gulp官网下载插件,地址如下:

https://gulpjs.com/plugins/

在这个网站我们可以寻找到自己需要的插件(以gulp-imagemin为例),然后在项目下打开命令提示行,输入以下命令:

npm install --save-dev gulp-imagemin --save-dov

然后我们在gulpfile.js里输入一下代码:

const imagemin = require("gulp-imagemin");
// 引入插件
gulp.task("default", () =>
    gulp.src("src/images/*")
        .pipe(imagemin())
        // 调用插件
        .pipe(gulp.dest("dist/images"))
        // 输出位置
);

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

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

相关文章

  • webpack 3 零基础入门教程 #1 - 介绍

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

    张红新 评论0 收藏0
  • 前端构建工具gulp入门教程

    摘要:本文假设你之前没有用过任何任务脚本和命令行工具,一步步教你上手。如果这两行命令没有得到返回,可能就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步:安装No...

    kuangcaibao 评论0 收藏0
  • Gulp使用入门

    摘要:是一款流式构建系统,如果说是基于任务执行器,就是基于的文件流任务执行器,比起有如下特点使用方便通过代码优于配置的策略,可以让简单的任务简单,复杂的任务更可管理。 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/1转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    ShevaKuilin 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<