Gulp

条件: Node环境(无脑安装)

全局安装    gulp  npm intall -g gulp   (global)

查看是否正确安装   node -v; npm -v; gulp -v; 出现版本号为成功 

进入项目目录下,创建package.json 文件  npm init;  (走到virsion走不下去是因为window的 cmd 可能有问题,换成git shell 或 其他)

package name: Rabbit(项目名称)

version: 1.0.0(版本号)

description: This is  a cute Rabbit(项目描述(必需))

entry point: gulpfile.js(入口文件(用来加载gulp))

test command: (测试命令)

git repository: (https://github.com/XXXX/库名.git)(git地址)

keyword: cute(关键字)

author: Rabbit(作者)

license: ISC (许可协议)

回车后会生成一堆东西,输入yes;大功告成!!!

安装gulp本地服务 (在该项目目录下) npm install gulp --save

//注:安装全局gulp是为了执行gulp任务,本地gulp是为了调用插件

安装gulp插件  npm install gulp-rename --save-dev (重命名)

                        npm install gulp-uglify --save-dev (代码压缩)

你的项目下就生成了node_modules 文件夹(不知道为什么我生成了一堆,别人就三个 - -||)

新建入口文件 gulpfile.js(记得名字跟上面保持一致)

、、、

var gulp = require('gulp');

var rename = require('gulp-rename');

var uglify = require('gulp-uglify');     //加载3个插件

gulp.task('rabbit',function () {   //起个名字rabbit,一会运行要用

gulp.src('bootstrap.js')           //运行文件路径

.pipe(rename({suffix:'.min'}))       //执行重命名方法,加min后缀

.pipe(uglify())        //执行代码压缩

.pipe(gulp.dest('js'))   //输出文件路径 不能为空

//(平时:这些方法就是上面加载插件时定义的)

})

、、、

gulp运行(入口文件目录下)  gulp rabbit


搞定  压缩成功  项目下出现压缩后的代码  速度很可观哦^^!

另:gulp插件库:https://gulpjs.com/plugins/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 8,404评论 7 55
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 6,993评论 1 11
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,862评论 1 32
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 4,744评论 0 8
  • 最近使用gulp自动化构建工具来开发网站,在此给大家分享一下使用gulp的一些使用教程。 一 gulp安装 1、安...
    穿越人海遇见你阅读 14,498评论 2 17

友情链接更多精彩内容