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

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