Gulp

作者: 吃萝卜的小兔子 | 来源:发表于2017-07-27 08:53 被阅读0次

条件: 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/

相关文章

  • gulp

    gulp gulp.src gulp.dest gulp.task gulp.watch gulp.pipe() ...

  • gulp自动化项目构建

    var gulp = require('gulp');//引用gulp var $ = require('gulp...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp讲解

    一、gulp的四个主要的API gulp.src、gulp.pipe、gulp.dest、gulp.watch 二...

  • JS: gulp.js

    var gulp = require('gulp'), minify = require('gulp-minify...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • gupl 的基本压缩

    // 获取 gulp var gulp = require('gulp'); // 获取 uglify 模块(用于...

  • gulp+webpack+experss

    var gulp = require('gulp'); var gls = require('gulp-live-...

  • gulp与webpack的区别

    gulp webpack 相同功能: 功能 gulp webpack gulp.task('sass'...

网友评论

      本文标题:Gulp

      本文链接:https://www.haomeiwen.com/subject/ttiakxtx.html