我希望browsersync将css注入项目样式目录styles_proj1":"site/idiv-proj-pgs/proj1/css。
我已经能够通过以下gulpfile设置使用browsersync将css注入到我的根styles_main":"site/css文件中。 （在下面列出）
每个项目页面都有自己的构建文件（gulpfile）。因此，对于项目1，我有一个名为proj1.js.的gulp文件，我使用requireDir来引用主gulpfile.js作为生产文件。
当我运行proj1.scss的保存gulp在终端[18:13:59] gulp-notify: [Gulp notification] styles_main_task finished中向我显示一条消息。让我感到困惑的是，我没有告诉样式主要任务，但它以某种方式运行。然后，当我导航回主页（root）并保存pro1.scss文件时，我会在index.html上收到注入通知。我也收到通知proj1_styles已完成，但它没有将css注入页面。我需要重新加载才能看到它生效。
使用config.json文件引用所有文件路径。
{
"paths": {
"source":{
"main_page_source":{
"styles_main":"./src/scss/main.scss",
"js_main":["bower_components/jquery/dist/jquery.min.js","src/js/modernizr.min.js",
"bower_components/Snap.svg/dist/snap.svg-min.js",
"bower_components/parsleyjs/dist/parsley.min.js",
"src/js/pages/*.js",
"src/js/slidenav.js"]
},
"project_pgs_src":{
"proj_1":{
"styles_proj1":"./src/scss/proj1.scss",
"js_proj1":["bower_components/jquery/dist/jquery.min.js","bower_components/picturefill/dist/picturefill.min.js","bower_components/picturefill/dist/plugins/intrinsic-dimension/pf.intrinsic.min.js","src/js/modernizr.min.js","src/js/jquery-throttle-debounce.min.js","src/js/project_pages/secretofdreaming.js","./js/nav.js"]
}
}
},
"main_dest":{
"styles_main":"site/css",
"js_main":"site/js",
"html":"site"
},
"project_pages_dest":{
"proj1_dest":{
"styles_proj1":"site/idiv-proj-pgs/proj1/css",
"html":"site/idiv-proj-pgs/proj1"
}
},
"watcher_main":{
"styles_main":"src/scss/**/*.scss",
"js_main":"src/js/**/*.js",
"html":"site/**/*.html"
},
"watcher_projects":{
"watcher_proj1":{
"styles_proj1":"src/scss/**/*.scss",
"html":"site/**/*.html"
}
}
}
}
// packages installed
var gulp = require('gulp'),
fs = require('fs'),
gulpif = require('gulp-if'), // condtionally run task
plumber = require('gulp-plumber'), // prevent pipe breaking
browserSync = require('browser-sync').create(),
bower = require('gulp-bower'), // gulp bower
concat = require('gulp-concat'), // concat files
cssmin = require('gulp-minify-css'), // minify css
rename = require('gulp-rename'), // rename file
runSequence = require('run-sequence').use(gulp), // runs gulp tasks in order
sass = require('gulp-sass'), //css preprocesser
uglify = require('gulp-uglify'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'), // minify js
requireDir = require('require-dir'),// allows me to use another directory for gulp tasks
del= require ('del'); // delete
// Using project_pages_tasks to store seperate tasks that are apart of my build out
requireDir('./project_pages_tasks', {recurese:true});
// Accessing config.json to get paths to files
function setVars () {
// config.json file
configFile = 'config.json';
// parse strings from config.json to object
configJSON = JSON.parse(fs.readFileSync(configFile));
// Accessing paths object in config.json
paths = configJSON.paths;
// how long error message will pop up
errorTimeout = 1000;
}
// call setVars
setVars();
// Tasks
var notify = require('gulp-notify');
var beep = require('beepbeep');
// start up browserSync
gulp.task('sync',function(){
// start browserSync
browserSync.init({
// Accessing paths.destination obj in config.json which contains html
server: paths.main_dest.html
});
});
// error handeler function
var onError = function(err){
notify.onError({
title: "Task Error",
message: "<%= error.message %>",
sound: "Sosumi"
})(err);
this.emit('end');
};
// watch main page scss file
gulp.watch(paths.watcher_main.styles_main,['styles_main_task']);
// watch main page html
gulp.watch(paths.watcher_main.html,['reload']);
// reload browser on html or script adjustment
gulp.task('reload', function(){
browserSync.reload();
});
// Styles Main
gulp.task('styles_main_task',function(){
return gulp.src(paths.source.main_page_source.styles_main)
.pipe(plumber({
// plumber finds errors in stream
errorHandler: onError}))
.pipe(sourcemaps.init()) // source maps
.pipe(postcss([ autoprefixer({ browsers: ['> 1%','last 2 versions'] }) ]))
.pipe(sass())
.pipe(gulp.dest(paths.main_dest.styles_main))
.pipe(cssmin()) // min css
.pipe(rename({ // rename file to site.min.css
suffix:'.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.main_dest.styles_main))
.pipe(notify({ message: 'styles_main_task finished' }))
// .pipe(browserSync.stream({match:'**/*.css'}));
.pipe(browserSync.stream());
});
//default task
gulp.task('main',function(){
// call runSequence to make sure our tasks are
// perfromed in the correct order
runSequence(styles_main_task','sync');
});
var gulp = require('gulp'),
plumber = require('gulp-plumber'), // prevent pipe breaking
rename = require('gulp-rename'), // rename file
uncss = require('gulp-uncss'), // uncss
sass = require('gulp-sass'), //css preprocesser
uglify = require('gulp-uglify'), // minify js
concat = require('gulp-concat'), // concat files
browserSync = require('browser-sync').create(),
fs = require('fs'),
cssmin = require('gulp-minify-css'), // minify css
runSequence = require('run-sequence').use(gulp),
notify = require('gulp-notify'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'),
del= require ('del'), // delete
beep = require('beepbeep');
// Accessing config.json to get paths to files
function setVars () {
// config.json file
configFile = 'config.json';
// parse strings from config.json to object
configJSON = JSON.parse(fs.readFileSync(configFile));
// Accessing paths object in config.json
paths = configJSON.paths;
errorTimeout = 1000;
}
setVars();
gulp.watch(paths.watcher_projects.watcher_proj12.styles_proj12,['proj1_styles']);
// gulp.watch(paths.watcher_main.js_main,['js_main_task']);
// Watch styles_proj10 and js_proj10 for changes
gulp.task('watch_proj1',function(){
gulp.watch(paths.watcher_projects.watcher_proj1.styles_proj1,['proj1_styles']);
gulp.watch(paths.watcher_projects.watcher_proj1.js_proj1,['proj1_js']);
});
// browserSync
gulp.task('sync',function(){
// start browserSync
browserSync.init({
// Accessing paths.destination obj in config.json which contains html
server: paths.project_pages_dest.proj1_dest.html,
files: paths.project_pages_dest.proj1_dest.styles_proj1
});
});
// Displays errors in nofitication format
var onError = function(err){
notify.onError({
title: "Task Error",
message: "<%= error.message %>",
sound: "Sosumi"
})(err);
this.emit('end');
};
// Styles task for proj1
gulp.task('proj1_styles',function(){
// source to project scss
return gulp.src(paths.source.project_pgs_src.proj_1.styles_proj1)
.pipe(plumber({
// plumber finds errors in stream
errorHandler: onError}))
.pipe(sourcemaps.init()) // source maps
.pipe(sass())
.pipe(gulp.dest(paths.project_pages_dest.proj1_dest.styles_proj1))
.pipe(cssmin()) // min css
.pipe(rename({ // rename file to site.min.css
suffix:'.min'
}))
// destination for compiled css for project 1
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.project_pages_dest.proj1_dest.styles_proj1))
.pipe(notify({ message: 'proj1_styles task finished' }))
.pipe(browserSync.stream());
});
gulp.task('project1',function(){
// call runSequence to make sure our tasks are
// perfromed in the correct order
runSequence('proj1_styles','sync');
});