我如何解决我的GULP工作stream程问题?

你好!

我正在做gulpfile.js,我有这个问题:

  • gulp-notify不通知通知中心
  • gulp-clean-css以%/ 100显示效率

这是我的gulpfile.js:

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Gulpfile ======== Impletation: 1. Styles 1.1 Sass to CSS (error catching) 1.2 SourceMaps 1.3 Autoprefixing 1.4 Minify and rename 2. JavaScripts 2.3 Control witch JSHint 2.1 Put it to one file 2.2 Minify and rename 3. Images 3.1 Minify images (.PNG .JPG .JPEG .GIF and .SVG) 3.2 Move 4. Watch and sync 4.1 Watching files 4.2 Reaload browsers 5. Build 5.1 Export files to dist folder (only outputs) Conent: ------- 1. Project Variables 2. Load plugins 3. Browser Sync Setup 4. Style Task 5. JavaScript Task 6. Images Task 7. Watch Task 8. Build Task * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*============================== 1. Project Variables ==============================*/ /* Main */ var projectNAME = 'StartPlate' var projectURL = 'startplate.dev/dev'; /* Styles */ var styleSRC = 'dev/sass/**/*.scss'; var styleDEST = 'dev/css'; var minifySRC = ['dev/css/**/*.css', '!dev/css/**/*min.css'] const AUTOPREFIXER_BROWSERS = [ 'last 2 version', '> 1%', 'ie >= 9', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 4', 'bb >= 10' ]; /* JavaScripts */ var jsSRC = ['dev/js/**/*.js', '!dev/js/**/*min.js']; var jsDEST = 'dev/js'; /* Images */ var imagesSRC = 'dev/img/raw/**/*.{png,jpg,jpeg,gif,svg}'; var imagesDEST = 'dev/img'; /* Wach */ var minifyWATCH = 'dev/css/**/*css'; var anotherWATCH = 'dev/**/*.{php,html}'; /* Build */ var buildDEST = 'dist/'; // Files that you want to package into a zip go here var buildSRC = [ // include common file types anotherWATCH, 'dev/**/*min.css', 'dev/**/*min.js', 'dev/**/*.svg', 'dev/**/*.png', 'dev/**/*.jpg', 'dev/**/*.jpeg', 'dev/**/*.gif', 'dev/**/*.ttf', 'dev/**/*.otf', 'dev/**/*.eot', 'dev/**/*.woff', 'dev/**/*.woff2', // include specific files and folders 'dev/robots.txt', 'dev/humans.txt', // exclude files and folders '!dev/img/raw/*', '!dev/**/*.scss', '!dev/**/*.map' ]; /*============================== 2. Loading Plugins ==============================*/ var gulp = require('gulp'); var rename = require('gulp-rename') var notify = require('gulp-notify') var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('gulp-autoprefixer'); var cleanCSS = require ('gulp-clean-css'); var concat = require ('gulp-concat'); var jshint = require ('gulp-jshint'); var uglify = require('gulp-uglify'); var imagemin = require ('gulp-imagemin') /*============================== 3. Browser Synch Setup ==============================*/ gulp.task( 'browser-synch', function() { browserSync.init( { // For more options // @link http://www.browsersync.io/docs/options/ // Project URL. proxy: projectURL, // `true` Automatically open the browser with BrowserSync live server. // `false` Stop the browser from automatically opening. open: true, // Inject CSS changes. // Commnet it to reload browser for every CSS change. injectChanges: true, // Use a specific port (instead of the one auto-detected by Browsersync). // port: 7000, } ); }); /*============================== 4. Styles Task ==============================*/ gulp.task('style', function () { return gulp.src( styleSRC ) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compact' // outputStyle: 'compressed' // outputStyle: 'nested' // outputStyle: 'expanded' }).on('error', sass.logError)) .pipe( sourcemaps.init( { loadMaps: true } ) ) .pipe( autoprefixer( AUTOPREFIXER_BROWSERS ) ) .pipe(sourcemaps.write('/maps')) .pipe(gulp.dest( styleDEST )) .pipe( browserSync.stream() ) .pipe( notify( { message: 'TASK: "style" Completed! 💯', onLast: true } ) ); }); gulp.task('minify', function () { return gulp.src( minifySRC) .pipe(cleanCSS({ level: '2', debug: true}, function(details) { console.log(details.name + ': old ' + details.stats.originalSize + ' kb'); console.log(details.name + ': new ' + details.stats.minifiedSize + ' kb'); console.log(details.name + ': ' + details.stats.timeSpent + ' ms'); console.log(details.name + ': ' + details.stats.efficiency + '%'); })) .pipe( rename( { suffix: '.min' } ) ) .pipe(gulp.dest( styleDEST )) .pipe( browserSync.stream() ) // refresh .pipe( notify( { message: 'TASK: "minify" Completed! 💯', onLast: true } ) ); }); /*============================== 5. JavaScripts Task ==============================*/ gulp.task('scripts', function() { return gulp.src( jsSRC) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(sourcemaps.init()) .pipe(concat('all.js')) .pipe(rename('index.js')) .pipe( uglify() ) .pipe( rename( { suffix: '.min' } ) ) .pipe(sourcemaps.write('/maps')) .pipe(gulp.dest(jsDEST)) .pipe( browserSync.stream() ) .pipe( notify( { message: 'TASK: "scripts" Completed! 💯', onLast: true } ) ); }); /*============================== 6. Images Task ==============================*/ gulp.task( 'images', function() { gulp.src( imagesSRC ) .pipe( imagemin( { progressive: true, optimizationLevel: 7, // 0-7 low-high interlaced: true, svgoPlugins: [{removeViewBox: false}] } ) ) .pipe(gulp.dest( imagesDEST )) .pipe( browserSync.stream() ) .pipe( notify( { message: 'TASK: "images" Completed! 💯', onLast: true } ) ); }); /*============================== 7. Watch Task ==============================*/ gulp.task( 'default', ['style', 'minify', 'scripts', 'images', 'browser-synch'], function () { gulp.watch( anotherWATCH, reload); gulp.watch( styleSRC, [ 'style'] ); gulp.watch( minifySRC, [ 'minify'] ); gulp.watch( jsSRC, [ 'scripts'] ); gulp.watch( imagesSRC, [ 'images'] ); }); /*============================== 8. Build Task ==============================*/ gulp.task('build', function() { return gulp.src( buildSRC ) .pipe(gulp.dest( buildDEST )) .pipe( notify( { message: 'TASK: "build" Completed! 💯', onLast: true } ) ); }); 

我尝试更新npm和所有依赖关系,这并没有帮助。 toast.exe已经允许通知,并在另一个项目中工作。

谢谢你的帮助!