使用gulp实现最基础的js/css压缩、ES6转ES5功能

前提

请先安装node和babel,并准备一个普通的web项目

全局安装gulp3.9.0

4.x不兼容3.x,平时使用建议直接安装3.9
npm install -g gulp@3.9.0

检查版本

gulp -v

在项目目录下安装gulp

npm install gulp@3.9.0 --save-dev

安装插件

压缩js
npm install gulp-uglify --save-dev

压缩css
npm install gulp-clean-css --save-dev

重命名
npm install gulp-rename --save-dev

es6 to es5
注意此处要根据情况替换,根据gulp-babel文档,如果你的babel --version是6.x,请如下所示安装gulp-babel@7
npm install gulp-babel@7 babel-core babel-preset-es2015 --save-dev
如果babel版本是7.x,请运行:
npm install gulp-babel @babel/core @babel-preset-es2015 --save-dev

在根目录创建.babelrc文件

{
  "presets": ["es2015"]
}

在根目录创建gulpfile.js,根据注释配置路径

//配置
var gulp = require('gulp');
var uglify = require('gulp-uglify'); //js
var cleanCSS = require('gulp-clean-css'); //css
var rename = require("gulp-rename"); //重命名
var babel = require("gulp-babel"); //ES6转ES5

gulp.task('default', ['auto']);

gulp.task('jscompress', function() {
   return gulp.src('dist/*.js') //转es5之后的js目录
        .pipe(rename({suffix: '.min'})) //重命名配置
        .pipe(uglify())
        .pipe(gulp.dest('dist/js')); //输出的文件夹
});

gulp.task('csscompress', function() {
  return  gulp.src('css/*.css') //css文件地址
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});

// ES6转化为ES5
gulp.task("es62es5", function () {
  return gulp.src("js/*.js") //es6文件地址
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

// 在命令行使用 gulp auto 启动监听
gulp.task('auto', function () {
    // 监听文件修改,当文件被修改则执行
    gulp.watch('dist/*.js', ['es62es5']);
    gulp.watch('js/*.js', ['jscompress']);
    gulp.watch('css/*.css', ['csscompress']);
});

命令行执行

gulp csscompress //仅压缩css
gulp jscompress //仅压缩js
gulp es62es5 //仅将es6转为es5
gulp //实时监听修改,并执行上面三个命令

答疑

全局安装和本地安装的区别

本地安装会生成一个依赖文件夹和package文件,项目如果在服务器上最好还是本地安装,下载项目的人可以一键npm install
仅在本地调试的话可以只全局安装。
一开始我的项目是在c盘,执行本地安装命令后没有生成node_modules文件夹,但模块却可以require到。经查阅后总结如下:

  • require命令的规则是自内而外,如果在当前目录下没有找到需要的依赖包会到父级目录下继续找,直到找到当前盘符根目录,还未找到则报错
  • 而npm全局安装的模块默认是安装在C:UsersAdministratorAppDataRoamingnpm,c盘项目即使没有本地安装依赖仍然可以require到模块

这样就可以解释为什么我的C盘项目没安装上本地依赖却可以require到模块,以及我猜测项目之所以生成不了node_modules文件是因为npm的一些规则,建议将项目放在其他盘符中,规避这个问题。

--save-dev和--save的区别

--save-dev安装的是开发阶段要使用的本地依赖
--save安装的是发布版本也能用的本地依赖
此处我们使用的是压缩代码的gulp,项目发布用不到,所以使用--save-dev

gulp-babel所需要的各个依赖分别是什么意思

逐一解释:

  • babel-core
    如果需要调用Babel的API则必装
  • babel-preset-es2015
    转换使用的预设规则,将es6转为es5,很多人喜欢用babel-preset-env,关于两者的区别请自行查阅,记住修改规则的同时也要修改.babelrc的配置

相关文档

超详细的Node中require第三方包规则
npm --save-dev --save 的区别
npm官网文档
babel官网文档
gulp 中文文档

总结

这只是最基础的压缩配置,可以无脑配,但建议配置使用完毕后再看看文档深入了解,毕竟实际使用中还有less转换等其它需求。

阅读 1.3k

推荐阅读