这里并不讲什么 gulp 及其其插件的安装，此前的文章已经提到过了。这里主要用来记录一下，gulp构建工具的一些简单常用的用法。
1）假如我们想使用gulp压缩js文件并合并js文件，应如何操作呢？
使用gulp-uglify和gulp-concat插件，gulpfile.js 大致如下：
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('concat', function() {
// 你的默认的任务代码放在这
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['concat']);
// 在命令行中运行 gulp
/*
默认的名为default的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp <task> <othertask>。
*/更加详细的用法可以参考：gulp教程之gulp-uglify
2）那如果我们想在编写网页时文件内容发生改变就自动实时的刷新浏览器，我们应该如何操作呢？
参考： 用gulp-livereload实现浏览器自动刷新页面
使用gulp-livereload插件，gulpfile.js大致如下：
/**
* Created by DreamBoy on 2016/8/21.
*/
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function() { //这里的watch，是自定义的，携程live或者别的也行
var server = livereload();
// app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
gulp.watch('app/**/*.*', function(file) {
server.changed(file.path);
});
});
3）如果我们想使用gulp编译sass文件呢？
使用gulp-sass插件，gulpfile.js大致如下：
/**
* Created by DreamBoy on 2016/8/22.
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});gulp.task('sass-watch', function() {
gulp.watch('stylesheets/**/*.scss', ['sass']);
});那，我们还想在编译后，保留css文件的同时，又压缩该css文件呢？其实还是一样的思路。具体可以参考：使用Gulp进行Javascript以及css压缩合并 来实现。需要安装 css压缩 gulp-minify-css 和 重命名 gulp-rename。修改 gulpfile.js 如下：
/**
* Created by DreamBoy on 2016/8/22.
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css'); // CSS 文件的压缩
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dist/css'));
});
gulp.task('sass-watch', function() {
gulp.watch('stylesheets/**/*.scss', ['sass']);
});注意：这里可能遇到一个错误：
解决Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'
解决：运行 npm rebuild node-sass
4）使用 gulp 编译 TypeScript
这里需要我们使用 gulp-typescript 插件，定义gulpfile.js大致如下：
var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('tsc', function () {
gulp.src('app/**/*.ts')
.pipe(ts())
.pipe(gulp.dest('wwwroot/app'));
});gulp.task('tsc:w', ['tsc'], function () {
gulp.watch('app/**/*.ts', ['tsc']);
});var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProj = ts.createProject('tsconfig.json');
gulp.task('tsc', function () {
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProj))
.pipe(gulp.dest('wwwroot/app'));
});var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProj = ts.createProject('tsconfig.json');
gulp.task('tsc', function () {
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProj))
.pipe(gulp.dest('wwwroot/app'));
});
gulp.task('tsc:w', ['tsc'], function () {
gulp.watch('app/**/*.ts', ['tsc']);
});参考：在 VS 2015 中使用 Gulp 编译 TypeScript 官方：教你如何使用Gulp构建TypeScript
更详细的用法可以参考： gulp-typescript这里加一段 关于 tsconfig.json 文件中参数的解释：
- target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
- noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
- module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
- removeComments：编译生成的JavaScript文件是否移除注释。
- sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
- outDir：编译输出JavaScript文件存放的文件夹。
- include、exclude：编译时需要包含/剔除的文件夹。
5）当使用 TypeScript 中的引入模块，那么TypeScript文件会生成Node.js使用的CommonJS模块。此时将工程由Node.js环境移到浏览器环境里，是不能使用的。浏览器并不认识require函数。那么需要我们将所有模块捆绑成一个JavaScript文件。参考：TypeScript 官网中提到的 教你如何使用Gulp构建TypeScript 。
gulpfile.js 文件可以修改为如下：
/**
* Created by Administrator on 2016/8/24 0024.
*/
/*var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('default', function() {
return tsProject.src()
.pipe(ts(tsProject))
.js.pipe(gulp.dest('dist'));
});*/
/**
*下面处理整合 由.ts文件编译来的 .js文件，这样在实际页面中才能引用这个js。
* nodejs实现了 commonJS规范，可以使用 require和exports。但在实际浏览器环境中不可以使用require和exports。
* 所以我们需要将所有模块捆绑成一个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 --save-dev browserify tsify vinyl-source-stream
*/
// 修改 gulpfile.js 如下：
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var paths = {
pages: ['src/*.html']
};
gulp.task('copy-html', function() {
return gulp.src(paths.pages)
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['copy-html'], function() {
return browserify({
basedir: '.',
debug: true, // debug: true。 这会让 tsify在输出文件里生成source maps。 source maps允许我们在浏览器中直接调试TypeScript源码，而不是在合并后的JavaScript文件上调试。
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
针对 TypeScript，那我们同时想生成压缩后的 bundle.js 文件呢？实时监测.ts文件变化，然后进行上述操作呢？gulpfile.js 内容修改如下：
/**
* Created by Administrator on 2016/8/24 0024.
*/
// npm install --save-dev gulp gulp-typescript
// 1. 编译 TypeScript文件 为JavaScript文件，并把所有模块捆绑成一个JavaScript文件 bundle.js
// npm install --save-dev browserify tsify vinyl-source-stream
// 2. 压缩上述生成的文件，并生成 单独的sourcemap文件
// npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps
// 3. 监听 .ts文件的变化实时进行上述的操作 —— 启动Gulp并保持运行状态，当你保存文件时自动编译。
// 帮你进入到编辑-保存-刷新浏览器的循环中。
// npm install --save-dev watchify gulp-util
var gulp = require("gulp");
// browserify watchify
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var watchify = require("watchify");
var tsify = require("tsify");
var gutil = require("gulp-util");
// uglify
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
pages: ['src/*.html']
};
var 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 bundle() {
return watchedBrowserify
.bundle()
/*.pipe(source('bundle.js'))
.pipe(gulp.dest("dist"));*/
// 添加 uglify 压缩功能
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // 这些调用让我们可以使用单独的sourcemap文件，而不是之前的内嵌的sourcemaps
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest("dist"));
}
gulp.task("default", ["copy-html"], bundle);
watchedBrowserify.on("update", bundle); // 每次TypeScript文件改变时Browserify会执行bundle函数
watchedBrowserify.on("log", gutil.log); // 将日志打印到控制台6）使用gulp-compass编译compass，gulpfile.js如下：
var gulp = require('gulp'),
compass = require('gulp-compass'),
mincss = require('gulp-minify-css');
gulp.task('css', function() {
// 编译CSS
// 压缩CSS
gulp.src('./sass/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'stylesheets',
sass: 'sass'
}))
.pipe(mincss())
.pipe(gulp.dest('stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('./sass/*.scss', ['css']);
});
gulp.task('default', ['watch'], function() {
// 将你的默认的任务代码放在这
console.log('task default');
});
后续持续更新 ......
1064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
