gulp

参考：https://www.cnblogs.com/Lehh/p/9643764.html 或 https://www.cnblogs.com/xuzhudong/p/8950193.html（推荐）

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

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

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

4、创建gulpfile.js配置文件（调用需要的gulp插件，配置了gulp的任务信息）.

5、执行gulp任务

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

个人感悟：针对整个项目的打包压缩使用webpack就好了，但是针对单个js文件的压缩还是使用 gulp 好。为什么要单独对某一个js文件压缩呢？

　　　　如果多个项目共用一个 js文件(自己开发的js文件，如JS-SDK.js文件)。这种文件，放在一个外网链接上比较好，改一份代码，所有的项目就会同步修改了。

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

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

7、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'))  // 目标路径 和 源文件路径不在一个项目目录下
});

8、gulp 监听文件修改：https://www.cnblogs.com/sowhite/p/6802891.html

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

　　gulp监听，有监听事件。可以在改变文件，监听事件触发，去执行一些功能，如刷新页面。https://www.cnblogs.com/zhangyubao/p/7003889.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);
});

9、 return ：如果任务b需要依赖任务a的完成，那么任务 a的task方法需要使用return返回stream https://www.cnblogs.com/xuzhudong/p/8950193.html

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

11、使用gulp时常用的插件介绍及用法：https://blog.csdn.net/u012396955/article/details/79380407

任务：（需要插件）

1、压缩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'))

2、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

3、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'))
});

4、自动刷新页面（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 提示：https://www.cnblogs.com/h5c3/p/8093751.html （ #__bs_notify__{ display: none!important; }）

5、代理跨域（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] // 代理中间件
      }
  })
});

6、编译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'))
});

8、结合起来使用，监听文件修改、编译、刷新页面：https://www.jianshu.com/p/449606cdf989 或 https://www.cnblogs.com/zhangyubao/p/7003889.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

9、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'))
});

10、利用Gulp实现前端打包自动上传服务器【比较实用】：https://blog.csdn.net/qq_33551792/article/details/100893061（亲测有效）

　　场景：没有 Jenkins 等自动化的部署工具。平时开发中，时不时都要打个包然后手动打开xftp工具将包上传到测试服务器上。操作比较费时间且都是重复的步骤。这种事情完全可以交给gulp去做。

const gulp = require("gulp");
const GulpSSH = require("gulp-ssh");

const remotePath = `/usr/local/party-h5/dist`;
const config = {
  ssh: {
    // 正式
    host: "*******",
    port: 22,
    username: "root",
    password: "*******"
  },
  remotePath,
  commands: [
    // 删除现有文件
    `rm -rf ${remotePath}`
  ]
};

const gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: config.ssh
});

/**
 * 上传前先删除服务器上现有文件...
 */
gulp.task("execSSH", () => {
  console.log("删除服务器上现有文件...");
  return gulpSSH
    .shell(config.commands, { filePath: "commands.log" })
    .pipe(gulp.dest("logs"));
});

/**
 * 上传文件到服务器
 */
gulp.task(
  "deploy",
  gulp.series("execSSH", done => {
    console.log("2s后开始上传文件到服务器...");
    setTimeout(() => {
      gulp.src(`./dist/**`).pipe(gulpSSH.dest(config.remotePath));
      console.log("上传完毕.....");
      done();
    }, 2000);
  })
);

View Code

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

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

　　　　　　　但是 webpack 可以，将所有依赖关联的文件进行处理。

posted @ 2018-03-23 17:01 吴飞ff 阅读(178) 评论(0) 编辑收藏举报

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

gulp

任务：（需要插件）

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

公告