gulp

问题 Iam using gulp CLI version: 2.2.1 Local version: 4.0.2 The node version is 12.16.3 MY code of gulpfile.js is 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), browserSync = require('browser-sync'), del=require('del'), imagemin = require('gulp-imagemin'), uglify = require('gulp-uglify'), usemin = require('gulp-usemin'), rev = require('gulp-rev'), cleanCss = require('gulp-clean-css'), flatmap = require('gulp-flatmap'), htmlmin = require('gulp-htmlmin'); gulp.task('sass',

问题 Can I use gulp-imagemin plugin with gulp-watch? So, I need to optimize images as soon as they are put into the folder. Here is a part of my gulpfile.js: var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); gulp.task('default', function() { gulp.watch('dist/images/**', function(event) { gulp.run('images'); }); }); // Image files gulp.task('images', function () { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true,

问题 I created pretty simple react application containing 7 pages and 13 components. I am using gulp to compile it, browserify for dependencies, all files are minimized. My build'ed app.js file has 1.1 MB . I think it is quite big. What can I do to reduce its size ? Are there any good practices to achieve smallest size ? EDIT: My source code without dependencies is 91 KB . 回答1: Using webpack-uglify and disabling source maps can greatly improve the output to a reasonable size (~140kbs for a hello

问题 I created pretty simple react application containing 7 pages and 13 components. I am using gulp to compile it, browserify for dependencies, all files are minimized. My build'ed app.js file has 1.1 MB . I think it is quite big. What can I do to reduce its size ? Are there any good practices to achieve smallest size ? EDIT: My source code without dependencies is 91 KB . 回答1: Using webpack-uglify and disabling source maps can greatly improve the output to a reasonable size (~140kbs for a hello

问题 I want to import a CSS-file from my node_modules using SASS. @import 'normalize.css/normalize'; This is how my gulpfile.js handles my SASS: const gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass']) .pipe(sass()) .pipe(gulp.dest('output/assets/css')); }); SASS compiler will not import the css from node_modules. Instead, this will throw an error. Error: File to import not found

问题 I want to import a CSS-file from my node_modules using SASS. @import 'normalize.css/normalize'; This is how my gulpfile.js handles my SASS: const gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass']) .pipe(sass()) .pipe(gulp.dest('output/assets/css')); }); SASS compiler will not import the css from node_modules. Instead, this will throw an error. Error: File to import not found

问题 The error is coming from the postcss plugin, I think I may have written it incorrectly. I'm trying to add cssnano and autoprefixer to the postcss plugin. gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143 throw new Error(i + ' is not a PostCSS plugin'); ^ Error: [object Object] is not a PostCSS plugin at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15) at new Processor (

问题 How can I do a condition inside Gulp pipe to output to a different destination. g.task('sass', function() { return g.src(sources.sass).pipe(changed(output.css)).pipe(sass({ style: 'compressed', sourcemap: true })).pipe(function() { if (..) { g.dest(output.css); } else { g.dest(output.css2); } }).pipe(notify('scss converted to css and compressed <%=f ile.relative %>')); }); 回答1: Use the gulp-if plugin: var gulpif = require('gulp-if'); g.task('sass', function() { return g.src(sources.sass)

问题 When I minified my css, I was left with an incorrect path to the fonts from various libraries. So, I created a task to move the fonts from my bower_components/ folder to dist/public/fonts : gulp.task('doit', function() { gulp.src(["public/bower_components/bootstrap/dist/fonts/*", "public/bower_components/font-awesome/fonts/*"]) .pipe(gulp.dest("dist/public/fonts")); }); Basically that should throw any fonts I need into a generic fonts folder, which my minified css should now be able to access

问题 I have a simple file: main.js: 'use strict'; const somefile = require('somefile') // class MyClass ... // some js I want to use gulp to create a minified file that has the code from somefile.js included too. But for some reason, I can't find a way to do this. Inside my minified file I have require('somefile') , not the full code. gulpfile.js const gulp = require('gulp'); const minify = require('gulp-minify'); const babel = require('gulp-babel'); const include = require("gulp-include"); const