刚从隔壁Webpack弃坑过来,觉得Webpack强大而又复杂,使用难度系数有点高,本人目前项目中需要的功能就是less->css、autoprefixer和babel等,感觉这点需求用Webpack来解决,有点杀猪焉用宰牛刀了。然后发现gulp好像不错,易用简单,它这种流水线式的构建前端项目模式很适合我这种单线程的脑瓜,不多说了,下面开始码吧!
gulp
是新一代的前端项目构建工具,你可以使用gulp
及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js
和css
代码,甚至压缩你的图片,gulp
仅有少量的API
,所以非常容易学习。 gulp
使用 stream
方式处理内容。和Webpack
一样,Gulp
也是需要运行于Node
环境的,Node
出来后催生了一批自动化工具,像Webpack,Bower,Yeoman,Grunt
等。
因为gulp
是需要运行于Node
环境,所以你需要在你的终端上安装好npm。npm是node.js
的包管理器,所以先在你的机子上安装好node.js吧
gulp全局安装
npm i gulp -g
初始化项目,生成package.json
// 配置默认即可
npm init
安装本地(作为开发依赖项)gulp
npm i gulp -D
npm
命令说明
npm i xxx -S
是npm install xxx --save
的简写(写入到dependencies
对象)
npm i xxx -D
是npm install xxx --save-dev
的简写(写入到devDependencies
对象)
npm i xxx -g
是npm install xxx --global
的简写(全局安装)
gulp4在gulp3的基础上新增了几个函数,但它的使用依旧简单方便。一共如下10个:
详情参见Gulp官方API文档:https://gulpjs.com/docs/en/api/concepts
在项目根目录下新建一个gulpfile.js
文件
首先我们来实现下less转css、gulp-rename和css前缀gulp-autoprefixer
如果你使用是的是scss、sass或stylus等其它动态样式语言的找对应的插件就可以了
npm i gulp-less gulp-rename gulp-autoprefixer -D
在根目录下新建src/styles/index.less
文件
// index.less
@color: red;
.main {
color: @color;
display: flex;
justify-content: center;
align-items: center;
}
// gulpfile.js
const gulp = require('gulp');
const less = require('gulp-less');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function() {
return gulp.src('src/style/*.less')
.pipe(less())
.pipe(autoprefixer())
.pipe(rename({
suffix: '.min' })) // .css前加前缀.min
.pipe(gulp.dest('dist/style'))
});
在package.json
中加入以下代码用于autoprefixer
"browserslist": [
"defaults",
"> 1%",
"last 2 versions",
"not ie <= 8",
"ios > 7"
]
运行 gulp styles
命令后我们来看下生成的css文件
OK,less部分完成,gulp-rename插件更多使用方法参见https://github.com/hparra/gulp-rename
安装babel
# Babel 7安装方法
$ npm i gulp-babel @babel/core @babel/preset-env -D
# Babel 6安装方法
$ npm i gulp-babel@7 babel-core babel-preset-env -D
注意:
babel
编译时只转换语法,几乎可以编译所有时新的JavaScript
语法,但并不会转化BOM
里面不兼容的,比如API、Promise、Set、Symbol、Array.from、async
等等的一些API
这时候就需要polyfill
来转化这些API
,所以我们需要进行以下安装
详细信息可以参见这篇文章
$ npm i @babel/plugin-transform-runtime -D
$ npm i @babel/runtime -S
根目录下新建babel.config.js
// babel.confgi.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
};
安装JS压缩插件(gulp-uglify)和JS合并插件(gulp-concat)
npm i gulp-uglify gulp-concat -D
新建src/js/index.js
和src/js/utils.js
两个文件
// index.js
const asyncFunc = function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('123');
},1000);
});
}
const handle = async function() {
const data = await asyncFunc();
console.log(add(data, 5));
}
handle();
// utils.js
function add (a, b) {
return a + b;
}
// gulpfile.js
const gulp = require('gulp');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('app.js')) // 将js文件夹下的所有js文件合并至app.js
.pipe(babel())
.pipe(uglify())
.pipe(rename({
suffix: '.min' }))
.pipe(gulp.dest('dist/js'))
});
执行 gulp scripts
命令,生成后的代码如下
// dist/js/app.min.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"),
_regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")),
_asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")),
asyncFunc = function () {
return new Promise(function (e, r) {
setTimeout(function () {
e("123")
}, 1e3)
})
},
handle = function () {
var e = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function e() {
var r;
return _regenerator.default.wrap(function (e) {
for (;;) switch (e.prev = e.next) {
case 0:
return e.next = 2, asyncFunc();
case 2:
r = e.sent, console.log(add(r, 5));
case 4:
case "end":
return e.stop()
}
}, e)
}));
return function () {
return e.apply(this, arguments)
}
}();
function add(e, r) {
return e + r
}
handle();
以上就是转成ES5后的代码,未使用gulp-uglify
插件处理
但是如果将生成的app.min.js引入到html文件中再浏览器上执行的话是会报错的,错误require is not defined
,没错浏览器不支持require,我们需要Browserify
插件将require的文件给合并进来
可以安装 gulp-module-bundle
来实现。
gulp4不再能够通过数组形式传入任务,你需要使用gulp.series()和gulp.parallel()来执行他们。例如:
gulp.task('default',gulp.parallel('styles','scripts'));//并行执行
gulp.task('default',gulp.series('styles','scripts'));//按顺序执行
gulp这一路码下来确实很简单,但又突然感觉功能没Webpack强大,根据自己的需求而定吧!