tl:dr - 考虑到我的gulpfile.js和CodeIgniter目录结构,我可以使用gulp.watch函数来监视文件更改的目录,然后自动上传这些文件使用gulp-sftp没有关联任务?如果没有,是否有另一种技术来实现这一目标?Gulp.js - 自动上传视图时更改/保存
问题:
我今天开始使用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']);
;
您需要'gulp-watch'模块才能使用手表。 – aslantorret
@aslantorret这不可能是真的,因为所有其他任务都能正常工作。 Gulp.watch是一个内置函数。 –