>文件夹结构
Components
------component1
-partials
- js
- html
- scss
- component1.css
- component1.js
------component2
-partials
- js
- html
- scss
- component2.css
- component2.js
功能是我所有的js,html和scss文件转换为一个css和js很好,但在组件文件夹中。如果我创建一个新组件,我不希望每次都将它们单独添加到 gulp 中,它将自动通过 gulp 添加。我怎样才能写我的 gulp 来实现这种类型的功能?
帮助将真正得到理解!!
您可以使用我为您的案例创建的以下代码:
项目结构:文件夹结构已测试
古尔普文件.js
/**
* Created by Anderson on 22/04/2016.
*/
'use strict';
var gulp = require('gulp');
var data = require('gulp-data');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var gcallback = require('gulp-callback');
var rename = require('gulp-rename');
var del = require('del');
var path = require('path');
var fs = require('fs');
gulp.task('main',function(){
//scan componens folder all files and folders
gulp.src("./components/**")
.pipe(data(function(file,cb){
var filepath = file.path;
var stats = fs.lstatSync(filepath);
var base = file.base;
var fpath = filepath.replace(file.base,"");
//console.log(fpath);
var array = fpath.split("\");
var basename = path.basename(fpath);
var componentName = array[0];
//destiny
var dest = base + fpath.replace(basename,"");
dest = dest.replace("partials\","");
//process the scss
if(stats.isDirectory() && basename == "scss"){
//console.log(array,componentName,basename);
//console.log(file.path);
var scssScan = base + fpath+"\*.scss";
console.log("scan",scssScan );
console.log("dest",dest);
//scan dir for scss
gulp.src(scssScan)
//concat all scss in a temporary file
.pipe(concat(componentName+".scss"))
.pipe(gulp.dest(dest))
.pipe(gcallback(function(){
//scan to process the scss
var componentPath = base + componentName;
var componentScssScan = componentPath + "\*.scss";
//console.log(componentPath,componentScssScan);
//console.log(componentPath + "\" + componentName+".scss");
//scan the component dir for scss
gulp.src(componentScssScan)
//process the sass
.pipe(sass())
.pipe(gulp.dest(dest));
//delete the temporary scss
//.pipe(del(componentPath + "\" + componentName+".scss"));
}));
}
//process the js
if(stats.isDirectory() && basename == "js"){
//console.log(array,componentName,basename);
//console.log(file.path);
var scssScan = base + fpath+"\*.js";
console.log("scan",scssScan );
console.log("dest",dest);
//scan dir for js
gulp.src(scssScan)
//concat all js in a temporary file
.pipe(concat(componentName+".js"))
.pipe(gulp.dest(dest));
}
cb(undefined,undefined);
}));
});
我认为您需要做的是为 css 和 js 文件添加观察程序并根据更改运行特定任务,这里有一些示例:
var gulp = require('gulp'),
less = require('gulp-less'),
cleancss = require('gulp-clean-css'),
server = require('gulp-server-livereload'),
rename = require('gulp-rename');
gulp.task('server', ['watch', 'webserver']);
gulp.task('styles', function() {
return gulp.src('public/assets/less/app.less')
.pipe(less())
.pipe(rename('app.css'))
.pipe(cleancss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/dist/css'))
});
// Add watcher for the changes in files
gulp.task('watch', function() {
gulp.watch('public/assets/less/*.less', ['styles']);
})
gulp.task('webserver', function() {
gulp.src('public')
.pipe(server({
livereload: true,
port: 8080,
open: true,
}))
});
您还可以使用 Livereload Chrome 扩展程序在代码发生更改时启用浏览器自动刷新功能。