Gulp.js - 変更/保存時にビューを自動的にアップロード

Question

私の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

あなたは一口を初めて使用する場合は、ベースとしての私の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']);