I am trying to get gulp-kss working on my project, but I am encountering issues when I try to run my task. I get the following error message:
[12:07:28] Using gulpfile ~/Documents/Websites/company/project-uiapp/gulpfile.js
[12:07:28] Starting 'generate-sc'...
[12:07:28] Finished 'generate-sc' after 20 ms
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/gulp-kss/node_modules/kss/lib/template/index.html'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at Stream.endStream (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/gulp-kss/index.js:42:27)
at _end (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/through/index.js:65:9)
at Stream.stream.end (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/through/index.js:74:5)
at DestroyableTransform.onend (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:523:10)
at DestroyableTransform.g (events.js:260:16)
at emitNone (events.js:72:20)
at DestroyableTransform.emit (events.js:166:7)
at /Users/Josua/Documents/Websites/company/project-uiapp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:965:16
at doNTCallback0 (node.js:419:9)
at process._tickDomainCallback (node.js:389:13)
How would I resolve this error? I have been searching Google and Stackoverflow but I have not found a solution yet. I am basing my solution off this gulp-kss. I have included my gulp task below:
...
// Generate styleguide with templates
gulp.task('generate-sc', function() {
gulp.src(['build-less'])
.pipe(gulpkss({
overview: __dirname + '/styles/styleguide.md'
}))
.pipe(gulp.dest('styleguide/'));
// Concat and compile all your styles for correct rendering of the styleguide.
gulp.src('./src/less/styles.less')
.pipe(less())
.pipe(gulpconcat('styles/style.css'))
.pipe(gulp.dest('styleguide/'));
...
I finally found the issue. I had to add kss to my package.json. I figured it would of been included with gulp-kss.
Related
When I edit theme .yml files in my themes source folder, I get this error. This does not happen when I edit scss or template .yml files from the template folder, only in the main folder. Others that had this error use things like webpack what I don't have. The gulp task for copy_theme_files is the same as other tasks with the difference that it has no return because I didn't know how to return there with two gulp.src functions.
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
});
Full gulpfile.js https://pastebin.com/NWt2uMwV
Error Output:
[00:37:58] Using gulpfile /var/www/themes.src/mytheme.src/gulpfile.js
[00:37:58] Starting 'watch'...
[00:38:20] Starting 'copy_theme_files'...
[copy_theme_files] Console Log: copy *.{yml,theme,php,png,jpg,gif,svg,ico},.gitkeep to build
[00:38:20] 'copy_theme_files' errored after 23 ms
[00:38:20] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/var/www/themes.src/mytheme.src/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /var/www/themes.src/mytheme.src/gulpfile.js:122:10
at taskWrapper (/var/www/themes.src/mytheme.src/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (/var/www/themes.src/mytheme.src/node_modules/async-done/index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
[00:38:20] Starting 'copy_includes'...
[copy_includes] Console Log: copy includes/**/*.*,includes/**/.gitkeep to build/includes
[00:38:20] Finished 'copy_includes' after 7.41 ms
[00:38:20] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:38:20] Finished 'copy_build' after 60 ms
Other tasks run fine
[00:41:06] Starting 'copy_templates'...
[copy_templates] Console Log: copy templates/**/*.twig,templates/**/.gitkeep to build/templates
[00:41:08] Finished 'copy_templates' after 1.86 s
[00:41:08] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:41:09] Finished 'copy_build' after 326 ms
You have this line in your task:
.pipe(paths.themeDest);
You probably mean:
.pipe(gulp.dest(paths.themeDest));
For your other question look at merging two gulp.src streams for how to return:
var merge = require('merge-stream');
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
const themesStream = gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
const imagesStream = gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
return merge(themesStream , imagesStream );
});
i cloned the repo ng-seed/universal
then - npm install,
then - npm run clean, then - npm run build:spa-dev (gives me error while) building
Finished 'bundle:spa-stage' after 1.42 min
[18:43:03] Starting 'copy:index.html'...
[18:43:03] 'copy:index.html' errored after 31 ms
[18:43:03] Error: Invalid dest() folder argument. Please specify a non-empty string or a function.
at Gulp.dest (D:\xx\xx\universal\node_modules\vinyl-fs\lib\dest\index.js:21:11)
at D:\xx\xx\universal\tools\build\gulp-helpers.js:56:36
at D:\xx\xx\universal\node_modules\lazypipe\index.js:27:19
at Array.map (<anonymous>)
at build (D:\xx\xx\universal\node_modules\lazypipe\index.js:26:37)
at Object.exports.debug (D:\xx\xx\universal\tools\build\gulp-helpers.js:57:7)
at copy (D:\xx\xx\universal\tools\build\gulp-tasks.js:90:18)
at bound (domain.js:301:14)
at runBound (domain.js:314:12)
at asyncRunner (D:\xx\xx\universal\node_modules\async-done\index.js:55:18)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickDomainCallback (internal/process/next_tick.js:218:9)
With console.log I output the variables that were used for DEST and found out that some were not yet set. Maybe that will help one or the other.
gulp.task(function minify_html() {
var SRC = variables.config.sourceHTML;
return (gulp
.src(SRC)
(...)
.pipe(gulp.dest(variables.config.targetHTML))
.pipe(gulpif(variables.settings.isServer, browser_sync.stream())));
console.log(variables.config.targetHTML); // 👈
});
For the sake of completeness, I use let variables = require ('./ variables.json') to maintain the settings separately
Trying to run eslint with gulp and getting this error. What have I missed? Here's my gulpfile.bable.js file.
import gulp from 'gulp';
import eslint from 'eslint';
const jsFiles = ['*.js', 'src/**/*.js'];
gulp.task('lint', () => {
gulp.src(jsFiles)
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
Here's the full error:
C:\Users\promer\projects\library>gulp lint
[14:50:35] Requiring external module babel-register
[14:50:35] Using gulpfile ~\projects\library\gulpfile.babel.js
[14:50:35] Starting 'lint'...
[14:50:35] 'lint' errored after 10 ms
[14:50:35] TypeError: (0 , _eslint2.default) is not a function
at Gulp.<anonymous> (C:/Users/promer/projects/library/gulpfile.babel.js:8:11)
at module.exports (C:\Users\promer\projects\library\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:134:8)
at C:\Users\promer\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
It was a simple mistake. I almost deleted the question, but I figured someone else might make the same mistake I did. While I have gulp-eslint installed I was actually loading regular eslint into my gulp file. The fix is to change this line
import eslint from 'eslint'
to
import eslint from 'gulp-eslint'
in the gulp trying to perform html minification in the build
Code:
gulp.task('html',function(){
return gulp.src('app/**/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate And Minify Styles
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('styles/main.css'))
// Minify Any HTML Output Files
.pipe(gulp.dest'dist'))
.pipe($.size({title: 'html'}));
});
Error:
TypeError: Uncaught, unspecified "error" event.
at TypeError (<anonymous>)
at Transform.emit (events.js:74:15)
at Transform.onerror (node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:558:12)
at Transform.emit (events.js:95:17)
at Transform.<anonymous> (index.js:80:42)
at Array.forEach (native)
at Transform.<anonymous> (index.js:68:35)
at Array.for Each (native)
at Transform.<anonymous> (index.js:46:36)
at Array.forEach (native)
has anyone came across this issue , please suggest how to fix this
Thanks
Sundar
upgrade gulp-useref:
npm remove gulp-useref && npm i gulp-useref --save-dev
I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});