美文网首页
gulp的菜鸟心得

gulp的菜鸟心得

作者: 别闹__ | 来源:发表于2017-12-13 15:34 被阅读0次
我是一只快乐的前端小渣渣~~~

领导说这次打包用gulp 你觉得怎么样,你说行就行咯,反正我又不敢顶嘴,我又不敢有意见。。

其实我是弱鸡,我真的不会用

需要什么?

  1. 文件合并
  2. 文件压缩
  3. es6 转es5
  4. 将线下的图片和音频路径替换成七牛的(就是字符串替换呗)
  5. 给js加上时间戳
  6. 替换引用路径

好,开始搞

npm install -g gulp                      //先全局安装一次
npm install gulp                          //在项目安装一次
npm install --save-dev gulp         //如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev
//后面引入的包  引入什么包就npm install 包的名字

//先创建一个文件名为gulpfile.js文件

  var gulp = require('gulp');                                        //引包
  var concat = require('gulp-concat');                        //- 多个文件合并为一个;
  var uglify = require('gulp-uglify');                             //- 压缩js文件
  var babel = require('gulp-babel');                            //- es5转es6
  var replace = require('gulp-replace');                       //- 替换字符串
  var rename = require('gulp-rename')                        //- 替换名字
  var minifyHTML   = require('gulp-minify-html');         //html压缩 
  var rev = require('gulp-rev');                                      //- 对文件名加MD5后缀
  var revCollector = require('gulp-rev-collector');         //- 路径替换        
gulp.task('minifyjs',function(){        //开启一个任务
         return gulp.src(['./assets/js/index.js','./assets/js/managers/test.js'])           //选择合并的JS原路径
        .pipe(babel({            //es6转es5
            presets: ['env']
        }))    
        .pipe(concat('XX_build.js'))            //合并js
        .pipe(replace('/assets/images/', 'https://路径'))     //替换图片路径
        .pipe(replace('/assets/sound/', 'https://路径'))       //替换音频路径
        .pipe(rename({suffix:'.min'}))           //重命名
        .pipe(uglify())                                  //压缩
        .pipe(gulp.dest('dist/js'))                 //输出新的路径
 });


 gulp.task('scripts', function () {                //开启一个给JS添加MD5后缀的任务    
    return gulp.src('dist/js/clue_build.min.js')      //输入原路径
        .pipe(rev())               //调用方法
        .pipe( rev.manifest())
        .pipe( gulp.dest( 'dist/js' ) );      //输出新的路径
});

 gulp.task('rev', function () {          //开启一个替换html中引用的js路径
    return gulp.src(['dist/js/rev-manifest.json', './index.html'])      //获取html文件
        .pipe( revCollector({             //替换
            replaceReved: true,
        }) )
        .pipe( minifyHTML({          //压缩
                empty:true,
                spare:true
            }) )
        .pipe( gulp.dest('dist') );     //输出
});

  gulp.task('copy',  function() {         //开启一个copy任务
        return gulp.src(['./assets/js/level.json'])
        .pipe(gulp.dest('dist/js'))
  }); 



gulp.task('default', ['minifyjs','scripts','rev','copy']);    //调用所有任务

跑完后所有线上文件都在dist目录下,只需要将dist传上就好了!
每一个任务都可以适当的要和不要 可以选择自己需要的功能。

相关文章

  • gulp的菜鸟心得

    我是一只快乐的前端小渣渣~~~ 领导说这次打包用gulp 你觉得怎么样,你说行就行咯,反正我又不敢顶嘴,我又不敢有...

  • gulp项目构建---看一遍就会了

    参考链接:gulp菜鸟教程npm官方网站gulp项目地址前端自动化Gulp工具常用插件 项目构建 多个开发者共同开...

  • gulp工具编译sass文件

    今天刚学习的gulp工具,与大家分享学习心得,望相互学习,?。下面我从三个方面详细介绍使用gulp工具编译sass...

  • 菜鸟的跑步心得

    说说我的跑步经历,我32岁,两个月前去体检已经一身毛病,脂肪肝,乳腺增生,心率不齐且过速,腰椎间盘突出,动辄失眠,...

  • 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 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp压缩合并文件

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

  • gulp讲解

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

  • JS: gulp.js

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

网友评论

      本文标题:gulp的菜鸟心得

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