常用的npm包
glob
通配符匹配文件名gulp-clean
删除文件gulp-uglify
压缩js文件gulp-babel
编译es6gulp-concat
合并文件gulp-less
less预处理gulp-autoprefixer
css兼容性处理gulp-clean-css
压缩cssgulp-if
条件判断gulp-connect
搭建前端服务,支持热更新yargs
命令行参数解析工具
构建项目
项目目录如下:
|--test
|--src
|--lib
|--jquery.min.js
|--component
|--button.js
|--selector.js
|--less
|--button.less
|--selector.less
|--dist
|--gulpfile.js
|--package.json
|--package-lock.json
gulpfile.js
:
const {task, src, watch, series, parallel, dest} = require('gulp');
const glob = require('glob');
const clean = require('gulp-clean');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const minifycss = require('gulp-clean-css');
const gulpif = require('gulp-if');
const connect = require('gulp-connect');
const argv = require('yargs').options('env',{
alias:'e',
default:'development',
describe:'environment: default "development" / "production"',
type:'string'
}).argv;
const destDir = 'dist';
const DEV = (argv.e === 'development' && true) || false;
let libArray = ['./src/lib/jquery.min.js'];
let jsArray = ['./src/component/*.js'];
let lessArray = ['./src/less/*.less'];
//js文件编译压缩打包
task('minjs', () => {
return src(jsArray)
.pipe(gulpif(!DEV, babel()))
.pipe(gulpif(!DEV, uglify()))
.pipe(concat('component.js'))
.pipe(dest(destDir))
.pipe(gulpif(!DEV, connect.reload()));
});
//less文件合并兼容性处理及压缩
task('mincss', () => {
return src(lessArray)
.pipe(concat('component.css'))
.pipe(gulpif(!DEV,autoprefixer()))
.pipe(gulpif(!DEV, minifycss()))
.pipe(dest(destDir))
.pipe(gulpif(!DEV, connect.reload()));
});
//第三方库原样输出
task('outputlib', () => {
return src(libArray, {base:'./src'})
.pipe(dest(destDir));
});
//清空打包目录
task('clean', () => {
return src(destDir + '/*')
.pipe(clean());
});
//配置前端服务
task('webserver', () => {
return connect.server({
root:'./',
livereload:true,
port:8080
});
});
//实时监听js,less
const watcher = () => {
watch(lessArray, series(mincss));
watch(jsArray, series(minjs));
};
task('dev', series('clean', parallel('minjs', 'mincss'), parallel(watcher, 'webserver')));
package.json
:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-if": "2.0.2",
"gulp-less": "^4.0.1",
"gulp-uglify": "^3.0.2",
"resolve": "^1.10.1",
"yargs": "^13.2.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp dev",
"build": "gulp build --env production"
},
"author": "",
"license": "ISC"
}