gulp

时间 2019-11-22

标签 gulp 栏目 JavaScript 繁體版

原文原文链接

参考：http://www.javashuo.com/article/p-brzpyauo-gk.html 或 http://www.javashuo.com/article/p-kcslfkjc-ee.html（推荐）php

一、 node安装好，经过npm全局安装好gulp（全局安装gulp是为了执行gulp任务）。（要注意，全局安装的gulp和本地gulp 会出现版本不兼容的问题，安装差很少版本的就没事）css

二、建立项目目录，涉及到node的项目，在项目根目录下必定要建立package.json（能够手写建立也能够命令行输入npm init建立；后面用到的node有关的插件，都会自动写入这个文件中的）配置文件。html

三、而后在项目中安装gulp依赖和gulp任务插件，须要用到什么功能，就安装对应的任务插件。（本地安装gulp则是为了调用gulp插件的功能）。如：cnpminstallgulp-htmlmin --save-dev ，其中 –save-dev 保存配置信息至 package.json 的 devDependencies 节点。 node

四、建立gulpfile.js配置文件（调用须要的gulp插件，配置了gulp的任务信息）.webpack

五、执行gulp任务git

注意：在项目中安装gulp插件，是在下载相应的插件文件。而后gulpfile.js中调用相应插件应用。es6

我的感悟：针对整个项目的打包压缩使用webpack就行了，可是针对单个js文件的压缩仍是使用 gulp 好。为何要单独对某一个js文件压缩呢？github

　　　　若是多个项目共用一个 js文件(本身开发的js文件，如JS-SDK.js文件)。这种文件，放在一个外网连接上比较好，改一份代码，全部的项目就会同步修改了。web

　　　　　这种代码是不放在项目中的，因此对他的压缩，是单独压缩的。使用在线压缩工具，有的在线压缩工具会压缩出问题来，因此使用gulp压缩。thinkphp

六、gulp 经常使用插件的功能和用法：https://github.com/lin-xin/blog/issues/2

七、gulp中的路径能够是绝对路径，能够是gulp目录外的文件：（亲测有效）

/* px 转化为 rem */
gulp.task('px2rem', function () {
  console.log('开始rem转化');
  
  gulp.src('./src/css/*.css')
  .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  .pipe(gulp.dest('E:/代码仓库/united_h5/css'))  // 目标路径 和 源文件路径不在一个项目目录下
});

八、gulp 监听文件修改：http://www.javashuo.com/article/p-psfnxbha-gk.html

gulp.task('watch',function(){
  gulp.watch('./src/css/*.css',['px2rem']);  // px2rem 为任务名称
})

　　gulp监听，有监听事件。能够在改变文件，监听事件触发，去执行一些功能，如刷新页面。http://www.javashuo.com/article/p-fpmuhzmo-gc.html

gulp.task('server', function() {
  browserSync.init({
      server: {
          baseDir: 'E:/代码仓库/united_h5' // 指定项目文件夹
      }
  })
  gulp.watch(`./src/css/*.css`,['server', 'px2rem','html', 'browserSync']).on('change', browserSync.reload);
});

九、 return ：若是任务b须要依赖任务a的完成，那么任务 a的task方法须要使用return返回stream http://www.javashuo.com/article/p-kcslfkjc-ee.html

十、gulp的task顺序执行：https://segmentfault.com/q/1010000003038517?sort=created

十一、使用gulp时经常使用的插件介绍及用法：http://www.javashuo.com/article/p-gtlbybid-h.html

任务：（须要插件）

一、压缩js文件（gulp-uglify）：

  gulp.src('js/*.js')
  .pipe(uglify()) // 启用默认的压缩设置
  .pipe(gulp.dest('dist'))

压缩参数：https://segmentfault.com/q/1010000015842986（去掉console）

  gulp.src('js/*.js')
  .pipe(uglify({
    compress: {
      drop_console: true,  // 过滤 console
    }
  }))
  .pipe(gulp.dest('dist'))

二、px转rem---gulp插件（）：https://zhuanlan.zhihu.com/p/22825560 或 https://www.npmjs.com/package/gulp-px2rem-plugin

.pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10}))

　让部分px不在转换成rem 、部分选择器不在转换为rem： ignore_px 、 ignore_selector

三、gulp文件自动添加 hash值（防缓存）：https://www.jianshu.com/p/164344f8e2ac 或 https://raoenhui.github.io/js/2019/03/03/gulp/（亲测有效）或 https://www.jianshu.com/p/dc81dadbf243（推荐一步到位）

　说明：browser-sync自动刷新不会从缓存获取（browserSync.reload 的刷新刷新，应该的是相似Shift+F5的刷新），本地开发基本不会出现文件缓存问题。可是用户那里，是会出现缓存问题的。（下面给文件生成了hash，可是旧有的文件，没有删除）

    //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){    
  return gulp.src('./src/css/*.css')        
            // .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录
            .pipe(rev())  
            .pipe(gulp.dest('dist')) // 将生成的hash文件添加到打包目录
            .pipe(rev.manifest('css-rev.json'))
            .pipe(gulp.dest('dist')) // 将map映射文件添加到打包目录
});
//Html更换css
gulp.task('html', () => {
  const cssManifest = gulp.src('dist/css-rev.json'); //获取css映射文件
  return gulp.src('./src/*.html')
    .pipe(revRewrite({manifest: cssManifest})) // 把引用的css替换成有版本号的名字
    .pipe(gulp.dest('dist'))
});

四、自动刷新页面（browser-sync）：https://www.liuchang.org/gulp-xiu-gai-wen-jian-browser-sync-zi-dong-shua-xin-liu-lan-qi/ 或 http://www.yanjiazhen.com/2016/10/gulp-refresh.html

　自动刷新页面原理：gulp运行了一个微型服务器（本身的服务器才能控制它自动刷新）。运行时，自动打开浏览器页面。

// 引入浏览器刷新插件
var browserSync = require('browser-sync');

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: 'app' // 指定项目文件夹
        }
    })
});

　　去掉更新成功的 Connected to BrowserSync 提示：http://www.javashuo.com/article/p-uykozbsa-ew.html （ #__bs_notify__{ display: none!important; }）

五、代理跨域（http-proxy-middleware）：https://blog.csdn.net/weixin_34372728/article/details/93874406 或 https://segmentfault.com/q/1010000015320070/revision

gulp.task('server', function() {
  var jsonPlaceholderProxy = proxy('/api',{
    target: 'https://test.iconntech.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
      }
  })
  browserSync.init({
      server: {
          baseDir: 'E:/代码仓库/united_h5', // 指定项目文件夹
          middleware: [jsonPlaceholderProxy] // 代理中间件
      }
  })
});

六、编译less 文件：https://www.kancloud.cn/thinkphp/gulp-guide/43999 （下面本身增长了一个px转化为rem的过程）

// 编译less
gulp.task('less', function () {
  // 1. 找到 less 文件
  gulp.src('src/less/*.less')
  // 2. 编译为css
      .pipe(less())
  // 3. 将css中px转化为rem 
      .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  // 4. 另存文件
      .pipe(gulp.dest('E:/代码仓库/united_h5/css'))
});

八、结合起来使用，监听文件修改、编译、刷新页面：https://www.jianshu.com/p/449606cdf989 或 http://www.javashuo.com/article/p-fpmuhzmo-gc.html（推荐）

var gulp = require('gulp')
var px2rem = require('gulp-px2rem-plugin')
// 引入浏览器刷新插件
let browserSync = require('browser-sync').create();

/* px 转化为 rem */
gulp.task('px2rem', function () {
  console.log('开始rem转化');
  
  gulp.src('./src/css/*.css')
  .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  .pipe(gulp.dest('E:/代码仓库/united_h5/css'))
  // .pipe(gulp.dest('E:/代码仓库/united_h5/css'))
});

gulp.task('server', function() {
  browserSync.init({
      server: {
          baseDir: 'E:/代码仓库/united_h5' // 指定项目文件夹
      }
  })
  gulp.watch(`./src/css/*.css`,['px2rem']).on('change', browserSync.reload);
});

View Code

九、gulp 不能编译压缩 es6的语法，否则会报错，解决方案：https://www.iteye.com/blog/skyuck-2443055 或 http://www.ptbird.cn/gulp-babel-es6.html（在压缩js文件前，用 babel 插件，转换成es5 语法就能够了）

　　使用 gulp-babel 插件要注意版本的问题。

var gulp = require('gulp')
var uglify = require('gulp-uglify')
var babel = require('gulp-babel'); // 添加这段代码
var es2015Preset = require("babel-preset-es2015");

gulp.task('pressJs2', function () {
  console.log('开始js文件压缩');
  gulp.src('src/js/evaluate.js')
  .pipe(babel({presets: [es2015Preset]}))
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'))
});

gulp 和 webpack 的区别：https://www.jianshu.com/p/6e3b28eeabb3

　　我的理解：他们是区别就是，gulp是针对一个一个文件独自处理的，文件内引入的文件是不会作处理的。好比 js 文件，引入的其它js文件； css 文件内，引入的图片。

　　　　　　　可是 webpack 能够，将全部依赖关联的文件进行处理。