gulp+typescript配置

Posted 2021-03-30 前端开发自留地

这也是抄的同事，只是收藏记录下，做为参考。

项目目录

package.json

{  
"name": "wap",  
"version": "1.0.0", 
"description": "",  
"main": "gulpfile.js",  
"scripts": {    
    "start": "gulp",    
    "watch": "gulp watch",    
    "build": "gulp build",    
    "clean": "gulp clean",    
    "cleanModule": "gulp cleanModule"
},
"author": "",  
"license": "ISC",  
"devDependencies": {    
    "babel-cli": "^6.26.0",    
    "babel-core": "^6.26.3",    
    "babel-loader": "^7.1.5",    
    "babel-preset-env": "^1.6.1",    
    "babel-preset-es2015": "^6.24.1",    
    "del": "^3.0.0",    
    "glob": "^7.1.2",    
    "gulp": "^3.9.1",    
    "gulp-babel": "^7.0.1",    
    "gulp-if": "^2.0.2",    
    "gulp-load-plugins": "^1.5.0",    
    "run-sequence": "^2.2.1",    
    "ts-loader": "^5.2.2",    
    "typescript": "^3.1.3",    
    "uglifyjs-webpack-plugin": "^1.2.7",    
    "webpack": "^4.16.3"  } }

gulpfile.js

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const runSequence = require('run-sequence');
const del = require('del');
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

gulp.task('js', callback => {
const files = glob.sync('src/js/*.ts');
const entry = {}; files.forEach(filepath => {
const pathObj = path.parse(filepath); entry[pathObj.name] = path.resolve(filepath); });
    
const production = process.env.production !== undefined;
const plugins = [];
if (production) { plugins.push(new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'), })); plugins.push(new UglifyJSPlugin()); }
webpack({ mode: 'none', entry, output: { filename: '[name].js', path: __dirname + '/build/js'}, resolve: { extensions: [".ts",".js", ".json"] },
module: {
/* 在webpack2.0版本已经将 module.loaders 改为 module.rules 
为了兼容性考虑以前的声明方法任然可用， 同时链式loader(用!连接)只适用于module.loader， 同时-loader不可省略 */rules: [ { test: /\.ts$/, use: [ { loader: "babel-loader", options: { presets: ["es2015"] } }, { loader: "ts-loader"} ], exclude: /node_modules/} ] }, plugins },(error, stats) => {
if (error) { 
console.log(error); } else if (stats.hasErrors()) {
console.log(stats.toString({ colors: true, reasons: true, })); }else{
// success} callback();
//这个callback是为了解决gulp异步任务的核心，强烈注意//gulp.task('reloadJs');}); }); gulp.task('watch',function() {    gulp.watch('src/**/*.ts',['js']); }); gulp.task('default',()=>{    runSequence(['js'],'watch'); }); gulp.task('clean', callback => {    del('build').then(paths => callback()); }) gulp.task('build',['clean'],function(callback){    process.env.production = true;    runSequence(['js'],'watch'); }); gulp.task('cleanModule', callback => {    del('node_modules').then(paths => callback()); });

tsconfig.json

{
  "compilerOptions": {
      "lib": ["dom", "es2015"]  } }

更多关于tsconfig.json编译选项查看：https://www.tslang.cn/docs/handbook/compiler-options.html

Gulp相关：

TypeScript相关：