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

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);
});
授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2017年12月30日 周六
Github账号登录以留言