首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何更改我的gulp文件,使其在代码库发生变化时运行构建任务?

如何更改我的gulp文件,使其在代码库发生变化时运行构建任务?
EN

Stack Overflow用户
提问于 2014-12-19 03:34:55
回答 2查看 2.8K关注 0票数 3

目前我有这样的gulp,每次我在应用程序中进行更改以查看我运行gulp构建所做的更改时,我如何通过添加监视任务来改进这个gulp文件,以便它自动检测到在js文件夹/ html文件中的某个地方引入了更改,并且它会自动为我运行构建任务。

代码语言:javascript
代码运行次数:0
运行
复制
var gulp = require('gulp'),
    csso = require('gulp-csso'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    ngAnnotate = require('gulp-ng-annotate'),
    minifyHtml = require("gulp-minify-html"),
    ngHtml2Js = require('gulp-ng-html2js');

gulp.task('build', function () {
    gulp.src(['../css/bootstrap_min.css', '../css/inputs.css', '../css/main.css',
        '../css/recording.css','../css/images.css','../css/responsive.css','../css/calendar.css'])
        .pipe(concat('index.min.css'))
        .pipe(csso())
        .pipe(gulp.dest('../css/'));

    gulp.src(['../lib/date.js', '../lib/angular/angular-1.2.17.js','../lib/angular/angular-resource.js',
        '../lib/ui-bootstrap-tpls-0.11.0.js','../lib/angular-ui-router.js',
        '../lib/underscore.min.js','../lib/sortable.js','../lib/localize.js','../lib/bindonce.min.js',
        '../lib/screenfull.js', '../lib/zeroclipboard.min.js'])
        .pipe(concat('libs.min.js'))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(gulp.dest('../lib'));

    gulp.src(['../js/app.js','../js/services.js','../js/controllers.js','../js/filters.js','../js/directives.js'])
        .pipe(concat('index.min.js'))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(gulp.dest('../js'));

    gulp.src("../partials/*.html")
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({
            moduleName: "Partials",
            prefix: "partials/"
        }))
        .pipe(concat("partials.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("../js"));

});

gulp.task('partials', function () {
    gulp.src("../partials/*.html")
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({
            moduleName: "Partials",
            prefix: "partials/"
        }))
        .pipe(concat("partials.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("../js"));
});
EN

回答 2

Stack Overflow用户

发布于 2014-12-24 15:33:10

您可以像这样添加watch任务

代码语言:javascript
代码运行次数:0
运行
复制
gulp.task('watch', function() {
    gulp.watch('../js/**/*.js', ['build']);
    gulp.watch('../css/**/*.css', ['build']);
    gulp.watch('../partials/**/*.html', ['build']);
})

希望这对你有所帮助!

票数 6
EN

Stack Overflow用户

发布于 2019-03-26 23:21:45

other answer适用于较老版本的gulp。语法在4.0版中发生了更改。

代码语言:javascript
代码运行次数:0
运行
复制
gulp.task('watch', function() {
    gulp.watch('../js/**/*.js', gulp.series('build'));
    gulp.watch('../css/**/*.css', gulp.series('build'));
    gulp.watch('../partials/**/*.html', gulp.series('build'));
})
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27554317

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档