Gulp学习和使用

标签： Gulp 分类： Nodejs 创建时间：2019-06-20 10:33:28 更新时间：2024-11-15 10:49:43

gulp是前端自动化工具,和grunt比较类似,但据说比较简单,和webpack也比较像,但我觉得两着在侧重点上不一样,gulp更加的全面,通过配置和插件,不仅可以完成webpack全部功能,而且可以完成webpack不能完成的功能,比如运行命令行.
安装gulp:

1	cnpm install gulp -g或者npm install gulp -g

参考文章:
1.使用gulp打包压缩完整项目

1.使用gulp-babel编译es6语法

安装npm install –save-dev gulp-babel babel-core babel-preset-env,添加babel代码:

var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('scripts', function() {
    return gulp.src(
      [
      'node_modules/babel-polyfill/dist/polyfill.js',
      'js/*.js'
      ])
      .pipe(babel({presets: ['env']}))
      .pipe(gulp.dest('compiled'))
});

执行gulp scripts,竟然报错了,未找到@babel/core

原来是babel-core包变成了@babel/core包,重新安装npm install @babel/core –save-dev即可.这里还有个问题就是:

我在使用babel的时候配置了 babel({presets:[‘es2015’]}),而实际上我安装的是babel-preset-env这个插件,所以报错了,需要改成babel({presets:[‘env’]}),参考( 相关网站 )由此也可以得出babel-preset-env和babel-preset-es2015不一样.当然你也可以在根目录下,新建.babelrc文件,里面写如下代码,和在babel构造函数中直接写是一样的.

1
2
3

{
    "presets": ["env"]
}

babel-preset-env和babel-preset-es2015的区别在这里: 相关网站 ,主要就是es2015已经过时了,env是新的,并且不过时的.

注意
gulp-babel只是一个转义,不能进行打包,对于在js文件中使用import进行导入的js,最好结合webpack-stream或者是browserify进行开发.

参考文章:
1.Compiling ES6 with Gulp and Babel
2.使用基于Babel的gulp
3.gulp-babel 自动编译es5-es6（可无脑按步骤操作）

2.gulp忽略某些文件

在使用gulp-uglify压缩js代码时，总会遇到要排除某些文件的情况，比如引入的外部js代码库，在压缩的时候，就想将外部引入的js代码库忽略掉。这里我示例是压缩public下的所有js，但是排除public/lib文件夹下的全部js文件。
(1) 默认的gulp.src中可以通过“./public/*/.js”这种形式包含处理的文件，也可以使用在文件前面加一个！,排除不想处理的文件比如：“!./public/js/src/pagination.js”。gulp默认支持glob格式，排除语法为!。这种方式有点问题：

//我想在打包./public目录下所有js文件，但是排除 ./public/lib/这个文件夹里的js，经过测试，使用!语法不能达到目的,即使我写'!./public/lib/pagination.js'、'!./public/js/src/*.js'都无法排除pagination.js被压缩的命运
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js','!./public/lib/**')
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

(2) 后来我尝试使用了gulp-ignore这个插件，这个插件的作用主要是：“Include or exclude gulp files from the stream based on a condition”。用法也比较简单，首先安装：cnpm install gulp-ignore -D，然后使用，这个插件也是有同样的问题，exclude排除某个文件或文件夹，但还是不起作用，相反，我使用include,却可以包含进来要打包的文件，确实能通过uglify,而且这个插件还有一个缺点，“和默认情况一样，不支持被排除文件的拷贝。”

var gulpIgnore = require('gulp-ignore');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
 
var condition = './public/lib/**';
// 这种方式，经过测试，还是把public/lib下的js文件给压缩了
gulp.task('task', function() {
  gulp.src('./public/**/*.js')
    .pipe(jshint())
    .pipe(gulpIgnore.exclude(condition))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'));
});

(3) 上面的方式都解决不了，只能换一个插件试试gulp-filter。安装npm install –save-dev gulp-filter,使用如下：

// 压缩 public/js 目录 js
const f = filter(['**', '!*lib/pagination.js']);
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(babel({presets: ['env']}))
        .pipe(f)
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 以下filter都不能满足要求
const f = filter(['\\lib\\pagination.js']); //所有的js都不会执行uglify了
const f = filter('./public/lib/pagination.js');  //同上,即使public/lib/pagination.js也不会被压缩

const f = filter(function(f){
  if(f.path.endswith('pagination.js')){
      return false;
  }
  return true;
});   //报错 f.path.endswith is not a function 

const f = filter(function(f){
  if(f.path.indexOf('pagination.js')>=0){
      return false;
  }
  return true;
}); //这种方式可以避免所有publi文件夹下的pagination.js被压缩，同时其他的js文件被压缩

结果，依然不能如愿以偿，我尝试了’!./public/lib/pagination.js’等多种方式书写排除，都无法满足要求。

我都要放弃这无用的尝试了，我猜测是因为windows的path路径是以反斜杠分隔的，而linux的文件路径是以斜杠分隔的。(折腾了一天了，啥都没弄出来，暂时放弃吧。)

参考文章：
1.gulp排除已压缩文件思路
2.gulp-ignore
3.gulp排除文件的用法
4.gulp.src排除一些文件
5.gulp.src() 方法排除目录
6.gulp-filter
7.Gulp学习笔记

新进展

//使用这种方式，可以只压缩public/lib目录下的js文件，而忽略public/js文件夹下的js文件
const f = filter('**/lib/**/*.js',{restore:true});
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(babel({presets: ['env']}))
        .pipe(f)
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
const f = filter('public/lib/**/*.js',{restore:true}); //也可以只压缩public/lib目录下的js文件

经过测试，filter好像是不能使用”!”这种语法的，也就是说’!*/lib/*/*.js’是不能排除public/lib下的js文件的，会报错：

最新进展

// 卧槽，这样真的可以排除public/lib下的全部文件被压缩，我以前是怎么写的呢？
// 
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/*.js','!public/lib/**'])
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.src(‘./public/\/.js’,’!public/lib/*‘) 少了中括号啊!，中括号!，中括号!我都开始怀疑我的智商了。**

参考文章：
1.常用gulp插件介绍(一)
2.gulp流(stream) 插件gulp-filter、gulp-flatten和gulp-if案例解读

总结：
1.gulp.src可以通过添加!符号，排除某些文件，src第一个参数是数组，!不能是数组第一个。

//可以排除public/lib下的所有文件被压缩
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/*.js','!public/lib/**'])
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

2.gulp-filter可以实现文件的过滤，过滤中不能加.的相对目录，不支持!语法。

// 可以将stream缩小到pubic/lib文件夹，其他文件夹都不会被压缩
const f = filter(['public/lib/**'],{restore:true});
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/*.js'])
        .pipe(babel({presets: ['env']}))
        .pipe(f)
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

往期推荐

文章目录

1. 1.使用gulp-babel编译es6语法
2. 2.gulp忽略某些文件

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。