Gulp.js - 更改/保存时自动上传视图

Question

tl:dr - 考虑到我的 gulpfile.js 和 CodeIgniter 目录结构，我是否可以使用 gulp.watch 函数来监视目录中的文件更改，然后使用 gulp-sftp 自动上传这些文件而无需相关任务？如果没有，是否有另一种技术可以做到这一点？

---

问题：

我今天第一次开始使用 Gulp.js，通过关注 tutorial，我已经能够非常轻松地自动执行多项任务，但与我的其他资产文件不同，我似乎找不到在我的应用程序视图文件被更改时查看并自动上传它们的方法。

主要区别在于，我的监视视图目录在发生更改时没有要执行的关联任务。如果我能想出一个有用的任务来执行，那么我的问题就会得到解决，但我宁愿学习一个完全避免这种情况的解决方案——如果它存在的话。

对我来说，这似乎是一个简单解决方案的问题，但我对 Gulp 的功能知之甚少。希望我所描述的有道理。以防万一，我会提供尽可能多的信息。

---

基本目录结构：

mywebsite.com
|
+-- application
|    |
|    +-- controllers
|    +-- models
|    +-- views
|
+-- assets
|    |
|    +-- css
|    +-- images
|    +-- js
|    +-- src
|        |
|        +-- images
|        +-- js
|        +-- scss
|
+-- system

gulpfile.js

// Modules

var gulp = require('gulp'),
    newer = require('gulp-newer'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    deporder = require('gulp-deporder'),
    stripdebug = require('gulp-strip-debug'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    assets = require('postcss-assets'),
    autoprefixer = require('autoprefixer'),
    mqpacker = require('css-mqpacker'),
    cssnano = require('cssnano'),
    sftp = require('gulp-sftp');

// Development Mode?

var devBuild = (process.env.NODE_ENV !== 'production');

// Folder Aliases

var folder = {
        src: 'assets/src/',
        build: 'assets/',
        app: 'application/' // <-------- Separate Folder Alias
    };

// SFTP Creds

var host = 'webserver.hostingcompany.com',
    user = 'username',
    pass = 'password',
    remotePath = 'mywebsite.com';

// Optimize Images

    gulp.task('images', function() {
        var out = folder.build + 'images/';
        return gulp.src(folder.src + 'images/**/*')
        .pipe(newer(out))
        .pipe(imagemin({ optimizationLevel: 5 }))
        .pipe(gulp.dest(out));
    });

// JavaScript Processing

    gulp.task('js', function() {
        var jsbuild = gulp.src(folder.src + 'js/**/*')
            .pipe(deporder())
            .pipe(concat('all.js'));

        if (!devBuild) {
        jsbuild = jsbuild
            .pipe(stripdebug())
            .pipe(uglify());
        }

        return jsbuild.pipe(gulp.dest(folder.build + 'js/'));
    });

// CSS Processing

    gulp.task('css', ['images'], function() {
        var postCssOpts = [
            assets({ loadPaths: ['images/'] }),
            autoprefixer({ browsers: ['last 2 versions', '> 2%'] }),
            mqpacker
        ];

        if (!devBuild) {
            postCssOpts.push(cssnano);
        }

        return gulp.src(folder.src + 'scss/screen.scss')
        .pipe(sass({
            outputStyle: 'nested',
            imagePath: 'images/',
            precision: 3,
            errLogToConsole: true
        }))
        .pipe(postcss(postCssOpts))
        .pipe(gulp.dest(folder.build + 'css/'));
    });

// SFTP Tasks

gulp.task('sftp', function () {
    return gulp.src(folder.src + '*')
        .pipe(sftp({
            host: host,
            user: user,
            pass: pass,
            remotePath: remotePath
        }));
});

// Run Tasks

    gulp.task('run', ['images', 'js', 'css',  'sftp']);

// Watch for Changes

    gulp.task('watch', function() {
        gulp.watch(folder.src + 'images/**/*', ['images']);
        gulp.watch(folder.src + 'js/**/*', ['js']);
        gulp.watch(folder.src + 'scss/**/*', ['css']);
        gulp.watch(folder.app + 'views/**/*.php', ['']); // <-------- The Prospective Watch Function
    });

// Default Task

    gulp.task('default', ['run', 'watch']);
;

Answer 1

如果你是 Gulp 的新手，你可以以我的 gulpfile 为基础。现在，我不在乎它的正确性，只需编辑此文件即可。

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;


var path = {
build: { //Тут мы укажем куда складывать готовые после сборки файлы
    html: 'build/',
    js: 'build/js/',
    css: 'build/css/',      
    img: 'build/img/',      
    fonts: 'build/fonts/',
    data: 'build/data/'
},
src: { //Пути откуда брать исходники
    html: 'src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
    js: 'src/js/main.js',//В стилях и скриптах нам понадобятся только main файлы
    style: 'src/style/main.scss',
    img: 'src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
    fonts: 'src/fonts/**/*.*',
    data: 'src/data/product.json'
},
watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
    html: 'src/**/*.html',
    js: 'src/js/**/*.js',
    style: 'src/style/**/*.scss',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*',
    data: 'src/data/product.json'
},
clean: './build'
};

var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Frontend_Devil"
};


gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер  
});

gulp.task('data:build', function () {
    gulp.src(path.src.data) //Найдем наш product.json файл
        .pipe(gulp.dest(path.build.data))//Выплюнем готовый файл в build
        .pipe(reload({stream: true}));//И перезагрузим сервер
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        .pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(sass()) //Скомпилируем
        .pipe(prefixer()) //Добавим вендорные префиксы
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        // .pipe(imagemin({ //Сожмем их
        //     progressive: true,
        //     svgoPlugins: [{removeViewBox: false}],
        //     use: [pngquant()],
        //     interlaced: true
        // }))
        .pipe(gulp.dest(path.build.img)) //И бросим в build
        .pipe(reload({stream: true}));
});


gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});


gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build',
    'data:build'
]);


gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
    watch([path.watch.data], function(event, cb) {
        gulp.start('data:build');
    });
});


gulp.task('webserver', function () {
    browserSync(config);
});


gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});


gulp.task('default', ['build', 'webserver', 'watch']);