使用gulp構建項目

常用的npm包

• glob通配符匹配文件名
• gulp-clean刪除文件
• gulp-uglify壓縮js文件
• gulp-babel編譯es6
• gulp-concat合併文件
• gulp-lessless預處理
• gulp-autoprefixercss兼容性處理
• gulp-clean-css壓縮css
• gulp-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"
}