gulp构建前端自动化解决方案

全篇共 1232 字。按500字/分钟阅读,预计用时 2.5 分钟。总访问 569 次,日访问 2 次。

gulp构建前端自动化解决方案。

使用npm安装如下依赖。

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.4.0",
    "gulp-sourcemaps": "^2.6.2",
    "gulp-typescript": "^3.2.3",
    "typescript": "^2.6.2"
  }

在根目录下创建 gulpfile.js 文件。

引入依赖,包括less和typescript的编译以及便于压缩后定位源代码的sourcemap。

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

gulpfile.js 文件中至少要存在一个名为 default 的gulp任务,否则会报找不到默认任务的错误。

defautl 任务用于在不指定任务名称时gulp默认执行的任务。

gulp.task('default');

定义编译less的任务:

gulp.task('cl', function(){
    return gulp.src(['app/less/*.less'])
        .pipe(less())
        .pipe(gulp.dest('dist/css/'));
});

定义编译typescript的任务:

gulp.task('ct', function(){
    return gulp.src(['app/ts/*.ts'])
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            target: "es5",
            module: "commonjs",
            sourceMap: true,
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js/'));
})

为了监听less和typescript文件的修改变化,并自动编译,需要创建一个gulp监听事件:

var lessWatcher = gulp.watch('app/less/**/*.less', ['cl']);
var tsWatcher = gulp.watch('app/ts/**/*.ts', ['ct']);

可以为监听器设置 change 事件的处理函数,时间处理函数接受一个包含事件信息的参数,这个参数是一个对象,对象中有事件类型和修改了的文件的路径。

lessWatcher.on('change', function(e){
    console.log(e.path);
});
tsWatcher.on('change', function(e){
    console.log(e.path);
});
原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2017年12月30日 周六
更新日期 » 2020年1月11日 周六
上一篇 » 探索FUI风格竞赛答题步骤
下一篇 » 探索FUI风格竞赛排行榜设计
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录