为什么 Gulp 在重新启动 Angular 服务器时会还原我的所有更改？

Question

我有一个带有 /dev 和 /dist 目录的 Angular 项目。我在 /dev 中完成所有开发工作。但是，每当我需要重新启动服务器时，我所做的所有更改（index.html、控制器等）都会丢失。因此，目前唯一的解决方案是尝试保留最新的备份副本，并在发生时将其粘贴回去。任何想法为什么会发生这种情况？

gulpfile.js：

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var inject = require('gulp-inject');
var imagemin = require('gulp-imagemin');
var iife = require("gulp-iife");
var cleanCSS = require('gulp-clean-css');
var Server = require('karma').Server;

gulp.task('default', ['serve']);

gulp.task('init', ['sass', 'bower', 'js', 'uglify-js', 'image', 'image-min', 'html', 'index']);

// Static Server + watching js/scss/html files
gulp.task('serve', ['init'], function() {

    browserSync.init({
        server: {
            baseDir: './dev'
        }
    });

    /* If you use a proxy replace the previous code with the below script replacing 'yourlocal.dev' with your local proxy

        browserSync.init({
            proxy: 'yourlocal.dev'
        });

   */

    gulp.watch('./scss/*.scss', ['sass-watch']);

    gulp.watch('./public/images/*', ['image-watch']);

    gulp.watch('./public/**/*.html', ['html-watch']);

    gulp.watch('./public/js/**/*.js', ['js-watch']);

    gulp.watch('./bower_components/**/*.js', ['bower']);
});


gulp.task('index', function() {
    var target = gulp.src('./dev/index.html');
    var sources = gulp.src(['./bower_components/**/*.js', './public/js/config/app.js', './public/js/factories/**/*.js', './public/js/services/**/*.js', './public/js/controllers/**/*.js', './public/js/filters/**/*.js', './public/js/directives/**/*.js', './bower_components/**/*.css', './public/css/**/*.css'], { read: false });

    return target.pipe(inject(sources))
        .pipe(gulp.dest('./dev'))
});

gulp.task('html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(gulp.dest('./dev'))
        .pipe(gulp.dest('./dist'))
        .pipe(browserSync.stream());
});

gulp.task('image', function() {
    return gulp.src('./public/images/*')
        .pipe(gulp.dest('./dev/public/images'))
        .pipe(gulp.dest('./dist/public/images'))
        .pipe(browserSync.stream());
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src('./scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(gulp.dest('./dev/public/css'))
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('./dist/public/css'))
        .pipe(browserSync.stream());
});

gulp.task('js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(gulp.dest('./dev/public/js'))
});

gulp.task('bower', ['index', 'index:dist'], function() {
    return gulp.src(['./bower_components/**/*.min.js', './bower_components/**/*.min.css'])
        .pipe(gulp.dest('./dev/bower_components'))
        .pipe(gulp.dest('./dist/bower_components'));
});

gulp.task('image-watch', ['image', 'image-min'], function(done) {
    browserSync.reload();
    done();
});

gulp.task('html-watch', ['html'], function(done) {
    browserSync.reload();
    done();
});

gulp.task('sass-watch', ['sass', 'index', 'index:dist'], function(done) {
    browserSync.reload();
    done();
});

gulp.task('js-watch', ['js', 'uglify-js', 'index', 'index:dist'], function(done) {
    browserSync.reload();
    done();
});

//DIST:

gulp.task('image-min', function() {
    gulp.src(['./public/**/*.png', './public/**/*.jpg', './public/**/*.gif', './public/**/*.jpeg'])
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/public'));
});

gulp.task('uglify-js', function() {
    return gulp.src(['./public/js/config/app.js', './public/js/factories/**/*.js', './public/js/services/**/*.js', './public/js/controllers/**/*.js', './public/js/filters/**/*.js', './public/js/directives/**/*.js'])
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('./public/js/min/'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/min/'));
});

gulp.task('index:dist', function() {
    var target = gulp.src('./dist/index.html');
    var sources = gulp.src(['./bower_components/**/*.js', './public/js/min/anonymous.min.js', './bower_components/**/*.css', './public/css/**/*.css'], { read: false });

    return target.pipe(inject(sources))
        .pipe(gulp.dest('./dist'))
});

gulp.task('dist:iife', function() {
    return gulp.src('./public/js/min/all.min.js')
        .pipe(iife())
        .pipe(rename('./js/min/anonymous.min.js'))
        .pipe(gulp.dest('./public'))
        .pipe(gulp.dest('./dist/public'));
});

gulp.task('serve:dist', ['dist:package'], function() {

    browserSync.init({
        server: {
            baseDir: './dist'
        }
    });

    /* If you use a proxy replace the previous code with the below script replacing 'yourlocal.dev' with your local proxy

        browserSync.init({
            proxy: 'yourlocal.dev'
        });

   */

    gulp.watch('./scss/*.scss', ['sass-watch']);

    gulp.watch('./public/images/*', ['image-watch']);

    gulp.watch('./public/**/*.html', ['html-watch']);

    gulp.watch('./public/js/**/*.js', ['js-watch']);

    gulp.watch('./bower_components/**/*.js', ['bower']);
});

gulp.task('dist:package', ['sass', 'bower', 'uglify-js', 'image', 'image-min', 'html', 'dist:iife', 'index:dist']);


//TDD

/* Run test once and exit */

gulp.task('spec', function(done) {
    new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    }, done).start();
});

/* Watch for file changes and re-run tests on each change */

gulp.task('serve:spec', function(done) {
    new Server({
        configFile: __dirname + '/karma.conf.js'
    }, done).start();
});

Answer 1

只需查看您的gulp config 和接缝，就像在您运行gulp serve 后，您必须在public 中添加code/modify，因此当public 文件夹中的任何内容发生更改时，它会被复制到dev和dist 文件夹。

当您运行gulp serve 时，您的browserSync 正在查看dev 文件夹，因此它始终与您的public 文件夹同步。基本上dev 和dist 总是根据public 中的内容自动生成。

dist 始终将所有资产都缩小并准备好部署在服务器上。