Gulp on Dapeng Zhang

如何使用Gulp构建TypeScript

Tue, 08 Jul 2025 15:16:23 +0000

1、创建目录
选择一个你认为适合开发项目的目录，然后参考下面创建项目目录

mkdir typescript_demo && ce typescript_demo

2、npm初始化项目
进入的项目目录后，执行

npm init -y

3、安装依赖库

npm install gulp-cli gulp typescript gulp-typescript --save-dev

gulp-typescript是TypeScript的一个Gulp插件。

4、配置项目

4.1、在项目目录下面创建目录src和dist
src目录用来存储原始的文件也即是这里的.ts文件，dist用来存放编辑后的文件。
在src目录下添加main.ts文件，内容如下

function hello(compiler: string) {
 console.log(`Hello from ${compiler}`);
}
hello("TypeScript");

4.2、在项目目录下新建一个tsconfig.json文件，配置内容如下

{
 "files": [
 "src/main.ts"
 ],
 "compilerOptions": {
 "noImplicitAny": true,
 "target": "es5"
 }
}

4.3、在项目目录下新建一个gulpfile.js文件，配置内容如下

const gulp = require("gulp");
const ts = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
 return tsProject.src()
 .pipe(tsProject())
 .js.pipe(gulp.dest("dist"));
});

4.4、试试gulp是否起作用，执行如下

npx gulp

得到类似如下的输出

[13:29:14] Using gulpfile ~/nodejs/typescript_demo/gulpfile.js
[13:29:14] Starting 'default'...
[13:29:15] Finished 'default' after 1.52 s

查看下dist目录下是否生成了一个main.js文件
执行如下命令确保代码运行正常

node dist/main.js

执行后输出类似如下结果

Hello from TypeScript

4.5、配置package.json
修改package.json中main对一个的值，如下

"main": "./dist/mian.js",

如果有其他想要的修改的话，可以继续修改其他符合自己需求的项

5、模块添加
创建文件src/greet.ts文件，内容如下

export function sayHello(name: string) {
 return `Hello from ${name}`;
}

然后在src/main.ts代码中调用，修改后结果如下

import { sayHello } from './greet';

console.log(sayHello("TypeScript"));

最后，将src/greet.ts添加到tsconfig.json，结果如下

{
 "files": [
 "src/main.ts",
 "src/greet.ts"
 ],
 "compilerOptions": {
 "noImplicitAny": true,
 "target": "es5"
 }
}

通过gulp编译代码

npx gulp

得到类似如下的输出

[13:38:59] Using gulpfile ~/nodejs/typescript_demo/gulpfile.js
[13:38:59] Starting 'default'...
[13:39:01] Finished 'default' after 1.6 s

执行如下命令确保代码运行正常

node dist/main.js

执行后输出类似如下结果

Hello from TypeScript

6、Browserify

注意，即使我们使用了ES2015的模块语法，TypeScript还是会生成Node.js使用的CommonJS模块。我们在这个教程里会一直使用CommonJS模块，但是你可以通过修改 module选项来改变这个行为。

现在，让我们把这个工程由Node.js环境移到浏览器环境里。因此，我们将把所有模块捆绑成一个JavaScript文件。所幸，这正是Browserify要做的事情。更方便的是，它支持Node.js的CommonJS模块，这也正是TypeScript默认生成的类型。也就是说TypeScript和Node.js的设置不需要改变就可以移植到浏览器里。

首先，安装Browserify，tsify和vinyl-source-stream。 tsify是Browserify的一个插件，就像gulp-typescript一样，它能够访问TypeScript编译器。 vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式，它叫做 vinyl。
安装命令如下

npm install browserify tsify vinyl-source-stream --save-dev

6.1、在src目录下新建一个index.html文件，内容如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title>Hello World!</title>
 </head>
 <body>
 <p id="greeting">Loading ...</p>
 <script src="bundle.js"></script>
 </body>
</html>

6.2、修改main.ts文件，修改后内容如下

import { sayHello } from "./greet";

function showHello(idName: string, name: string) {
 const elt = document.getElementById(idName);
 elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

调用sayHello函数更改页面上段落的文字
6.3、配置gulpfile.js，修改后内容如下

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const paths = {
 pages: ['src/*.html']
};

gulp.task("copy-html", function () {
 return gulp.src(paths.pages)
 .pipe(gulp.dest("dist"));
})

gulp.task("browserify", function() {
 return browserify({
 basedir: '.',
 debug: true,
 entries: ['src/main.ts'],
 cache: {},
 packageCache: {}
 })
 .plugin(tsify)
 .bundle()
 .pipe(source('bundle.js'))
 .pipe(gulp.dest("dist"));
})

gulp.task("default", gulp.series('copy-html', 'browserify'));

这里的gulp配置可能与以往的不同，需要稍加注意下，这里使用的是xx@xx这个版本
这里增加了copy-html任务并且把它加作default的依赖项。这样，当 default执行时，copy-html会被首先执行。我们还修改了 default任务，让它使用tsify插件调用Browserify，而不是gulp-typescript。方便的是，两者传递相同的参数对象到TypeScript编译器。

调用bundle后，我们使用source（vinyl-source-stream的别名）输出文件命名为bundle.js。

测试此页面，运行npx gulp，然后在浏览器里打开dist/index.html。你应该能在页面上看到“Hello from TypeScript”。

注意，我们为Broswerify指定了debug: true。这会让 tsify在输出文件里生成source maps。 source maps允许我们在浏览器中直接调试TypeScript源码，而不是在合并后的JavaScript文件上调试。你要打开调试器并在 main.ts里打一个断点，看看source maps是否能工作。当你刷新页面时，代码会停在断点处，从而你就能够调试 greet.ts。

7、Watchify、Babel和Uglify
现在代码已经用Browserify和tsify捆绑在一起了，还可以使用Browserify插件为构建添加一些新的特性。

Watchify启动Gulp并保持运行状态，当你保存文件时自动编译。帮你进入到编辑-保存-刷新浏览器的循环中。

Babel是个十分灵活的编译器，将ES2015及以上版本的代码转换成ES5和ES3。你可以添加大量自定义的TypeScript目前不支持的转换器。

Uglify帮你压缩代码，将花费更少的时间去下载它们。

7.1、Watchify
启动Watchify，让它在后台帮我们编译：

npm install watchify gulp-util --save-dev

修改gulpfile.js文件，修改后内容如下：

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const paths = {
 pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
 basedir: '.',
 debug: true,
 entries: ['src/main.ts'],
 cache: {},
 packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
 return gulp.src(paths.pages)
 .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
 return watchedBrowserify
 .bundle()
 .pipe(source('bundle.js'))
 .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function() {
 return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

共有三处改变，但是需要你略微重构一下代码。

将browserify实例包裹在watchify的调用里，控制生成的结果。
调用watchedBrowserify.on(“update”, bundle)每次TypeScript文件改变时Browserify会执行bundle函数。
调用watchedBrowserify.on(“log”, gutil.log);将日志打印到控制台。

(1)和(2)在一起意味着我们要将browserify调用移出default任务。然后给函数起个名字，因为Watchify和Gulp都要调用它。 (3)是可选的，但是对于调试来讲很有用。

现在当你执行gulp，它会启动并保持运行状态。试着改变 main.ts文件里showHello的代码并保存。你会看到这样的输出：

7.2、Uglify
首先安装Uglify。因为Uglify是用于混淆你的代码，所以我们还要安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps。

npm install gulp-uglify vinyl-buffer gulp-sourcemaps --save-dev

修改gulpfile.js文件，修改后内容如下

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const paths = {
 pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
 basedir: '.',
 debug: true,
 entries: ['src/main.ts'],
 cache: {},
 packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
 return gulp.src(paths.pages)
 .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
 return watchedBrowserify
 .bundle()
 .pipe(source('bundle.js'))
 .pipe(buffer())
 .pipe(sourcemaps.init({
 loadMaps: true
 }))
 .pipe(uglify())
 .pipe(sourcemaps.write('./'))
 .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function() {
 return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

注意uglify只是调用了自己。buffer和sourcemaps的调用是用于确保sourcemaps可以工作。这些调用让我们可以使用单独的sourcemap文件，而不是之前的内嵌的sourcemaps。你现在可以执行 gulp来检查bundle.js是否被压缩了：

7.3、Babel
首先安装Babelify和ES2015的Babel预置程序。和Uglify一样，Babelify也会混淆代码，因此我们也需要vinyl-buffer和gulp-sourcemaps。默认情况下Babelify只会处理扩展名为 .js，.es，.es6和.jsx的文件，因此我们需要添加.ts扩展名到Babelify选项。

npm install babelify babel-core babel-preset-env vinyl-buffer gulp-sourcemaps --save-dev

修改gulpfile.js文件，修改后内容如下：

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const watchify = require("watchify");
const gutil = require("gulp-util");
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const paths = {
 pages: ['src/*.html']
};

const watchedBrowserify = watchify(browserify({
 basedir: '.',
 debug: true,
 entries: ['src/main.ts'],
 cache: {},
 packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
 return gulp.src(paths.pages)
 .pipe(gulp.dest("dist"));
})

function browserifyBundle() {
 return watchedBrowserify
 .transform('babelify', {
 presets: ['env'],
 extensions: ['.ts']
 })
 .bundle()
 .pipe(source('bundle.js'))
 .pipe(buffer())
 .pipe(sourcemaps.init({
 loadMaps: true
 }))
 .pipe(uglify())
 .pipe(sourcemaps.write('./'))
 .pipe(gulp.dest("dist"));
}

gulp.task("browserify", function () {
 return browserifyBundle();
})

gulp.task("default", gulp.series('copy-html', 'browserify'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

我们需要设置TypeScript目标为ES2015。 Babel稍后会从TypeScript生成的ES2015代码中生成ES5。修改 tsconfig.json:

{
 "files": [
 "src/*.ts"
 ],
 "compilerOptions": {
 "noImplicitAny": true,
 "target": "es2015"
 }
}

对于这样一段简单的代码来说，Babel的ES5输出应该和TypeScript的输出相似。

实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.2

Webpack+Gulp 实现静态文件打包并自动上传到七牛完美示例

Wed, 02 Jul 2025 15:40:19 +0000

经过几天的努力终于实现了一个完美的作品，webpack可以与gulp完美结合的进行打包静态文件，并将静态文件上传到七牛云存储，当然也可以传到你想传的云存储了，这里只分享一个七牛的云存储方案。

关于如何使用webpack打包静态代码，这个可以参考我之前的一些文章和方案，不行的话可以进群交流。

这里只分享一下gulp这边的操作，然后给一个例子实现如何一条命令打包静态文件并更新cdn文件的方法。

先展示一下gulpfile.js文件

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const shrink = require('gulp-cssshrink');
const webpack = require('gulp-webpack');
const qn = require('gulp-qn');
// MD5戳
const rev = require('gulp-rev-qn');
const revCollector = require('gulp-rev-collector');
const runSequence = require('run-sequence');
const config = require('./webpack.config');
const qiniu_options = {
 accessKey: 'xxx',
 secretKey: 'xxx',
 bucket: 'xxx',
 domain: 'http://xxx.com'
};
gulp.task('publish-js', function () {
 return gulp.src(['./build/js/*.js'])
 .pipe(uglify())
 .pipe(rev())
 .pipe(gulp.dest('./build/js'))
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'js'
 }))
 .pipe(rev.manifest())
 .pipe(gulp.dest('./build/rev/js'));
});
gulp.task('publish-font-img', function () {
 return gulp.src(['./build/js/*.svg','./build/js/*.gif','./build/js/*.woff2','./build/js/*.ttf','./build/js/*.eot','./build/js/*.woff'])
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'js'
 }));
});
gulp.task('publish-css', function () {
 return gulp.src(['./build/js/*.css'])
 .pipe(rev())
 .pipe(gulp.dest('./build/js'))
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'css'
 }))
 .pipe(rev.manifest())
 .pipe(gulp.dest('./build/rev/css'));
});
gulp.task('publish-html', function () {
 return gulp.src(['./build/rev/**/*.json', './build/views/*.html'])
 .pipe(revCollector({
 dirReplacements: {
 '/js/': ''
 }
 }))
 .pipe(gulp.dest('./build/views'));
});
gulp.task('default',function(callback){
 runSequence(
 ['publish-css','publish-js','publish-font-img'],
 'publish-html',
 callback);
});

publish-js部分是将我的js文件进行版本更新并上传到七牛。

publish-font-img部分是将我的字体文件、图片文件上传到七牛

publish-css部分是将我的css文件进行版本更新并上传到七牛

publish-html将我html文件中对应的js路径进行替换，好了，可以直接发布这个build文件夹下的文件了。

Gulp解决less一条龙服务

Tue, 01 Jul 2025 15:04:04 +0000

所谓gulp对less的一条龙服务是指，由less编译为css，再由css编译为min.css，再由min.css编译为min.css.map

大白话就是Less文件转为css文件，然后将css文件压缩，再然后生成css压缩文件的map文件最后就得到了我们的需要使用的

min文件和一些奇葩浏览器要用到的map文件

gulp的配置如下

var gulp = require('gulp');
var gulpLess = require('gulp-less');
var gulpConcat = require('gulp-concat');
var gulpSourcemaps = require('gulp-sourcemaps');
var gulpMinifyCss = require('gulp-minify-css');
var gulpRename = require('gulp-rename');
gulp.task('less',function(){
 return gulp.src(paths.less)
 .pipe(gulpLess())
 .pipe(gulp.dest('./app/css'))//这个是要存放css的目录
 .pipe(gulpConcat('./app.css'))//这个是生成的css文件名
 .pipe(gulpSourcemaps.init())
 .pipe(gulpMinifyCss())
 .pipe(gulpRename({
 'suffix': '.min'
 }))
 .pipe(gulpSourcemaps.write('./'))
 .pipe(gulp.dest('./app/css'))
});

然后没有安装gulp的去google下安装一下

运行

gulp less

在使用gulp-less的误区

Tue, 01 Jul 2025 15:04:00 +0000

在使用gulp-less的时候会出现这样的一个问题

这个修改之前的代码

//变量声明
var paths = {
 'less':[
 './app/less/**/*.less',
 ]
};
gulp.task('less',function(){
 return gulp.src(paths.less)
 .pipe(gulpLess())
 .pipe(gulp.dest('./app/css'))
});

其实我的意思就是，将我less目录下面的所有文件合并成一个app.css

但是这样执行确实行不通，会爆出来很多的错误。之前还是一头雾水，后来换了方式

这个修改之后的代码

//变量声明
var paths = {
 'less':[
 './app/less/app.less',
 './app/less/main.less', 
 ]
};
gulp.task('less',function(){
 return gulp.src(paths.less)
 .pipe(gulpLess())
 .pipe(gulp.dest('./app/css'))
});

其实这样执行就没有问题了，其实很明了，问题已经出现了，也知道了原因，因为我们要生成一个文件app.css，那么其实app.less是主要文件

那么在其中的一些变量都是引过来，然后执行。那么我之前的代码问题就是在于我要将所有的less文件都编译成对应的css，我的天，怎么可能，

那要解决的问题就是每个文件都要引入需要的文件，哈哈，糊涂了。

Gulp 实现 js、CSS,img 合并和压缩

Mon, 30 Jun 2025 14:08:55 +0000

前提条件，知道如何安装nodejs、gulp，这里不做介绍，可以自行google

实现此功能需要安装的gulp工具有如下

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

gulp配置文件如下

//在你的项目根目录下创建gulpfile.js，代码如下：
 
// 引入 gulp
var gulp = require('gulp');
 
// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
 imagemin = require('gulp-imagemin'),//图片压缩
 pngcrush = require('imagemin-pngcrush'),
 minifycss = require('gulp-minify-css'),//css压缩
 jshint = require('gulp-jshint'),//js检测
 uglify = require('gulp-uglify'),//js压缩
 concat = require('gulp-concat'),//文件合并
 rename = require('gulp-rename'),//文件更名
 notify = require('gulp-notify');//提示信息
 
// 压缩html
gulp.task('html', function() {
 return gulp.src('src/*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('./dest'))
 .pipe(notify({ message: 'html task ok' }));
 
});
 
// 压缩图片
gulp.task('img', function() {
 return gulp.src('src/images/*')
 .pipe(imagemin({
 progressive: true,
 svgoPlugins: [{removeViewBox: false}],
 use: [pngcrush()]
 }))
 .pipe(gulp.dest('./dest/images/'))
 .pipe(notify({ message: 'img task ok' }));
});
 
// 合并、压缩、重命名css
gulp.task('css', function() {
 return gulp.src('src/css/*.css')
 .pipe(concat('main.css'))
 .pipe(gulp.dest('dest/css'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(minifycss())
 .pipe(gulp.dest('dest/css'))
 .pipe(notify({ message: 'css task ok' }));
});
 
// 检查js
gulp.task('lint', function() {
 return gulp.src('src/js/*.js')
 .pipe(jshint())
 .pipe(jshint.reporter('default'))
 .pipe(notify({ message: 'lint task ok' }));
});
 
// 合并、压缩js文件
gulp.task('js', function() {
 return gulp.src('src/js/*.js')
 .pipe(concat('all.js'))
 .pipe(gulp.dest('dest/js'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(uglify())
 .pipe(gulp.dest('dest/js'))
 .pipe(notify({ message: 'js task ok' }));
});
 
// 默认任务
gulp.task('default', function(){
 gulp.run('img', 'css', 'lint', 'js', 'html');
 
 // 监听html文件变化
 gulp.watch('src/*.html', function(){
 gulp.run('html');
 });
 
 // Watch .css files
 gulp.watch('src/css/*.css', ['css']);
 
 // Watch .js files
 gulp.watch('src/js/*.js', ['lint', 'js']);
 
 // Watch image files
 gulp.watch('src/images/*', ['img']);
});