0

I just started learning gulp here I had written the task and run after run the task nothing is changed in my CSS file vendor prefixes are not added. I'm trying to add vendor prefixes and compress my CSS files. Can anyone suggest me. Is there my directory path is correct what I'm doing wrong here? why it is not working. And I used the latest version 4.0.1

Editor check dir path and task enter image description here

enter image description here

Husna
  • 1,286
  • 4
  • 19
  • 48

1 Answers1

1

First argument of gulp.src() have to be glob pointing to file/files.

Explaining Globs

A glob is a string of literal and/or wildcard characters used to match filepaths. Globbing is the act of locating files on a filesystem using one or more globs.

So first argument of src() should look like:

  • ./assets/css/app.css (to match specific file)
  • ./assets/css/*.css (to match all files with ext .css in directory)
  • ./assets/css/**/*.css (to match all files with ext .css in
    directory with subdirectorys)
  • ./assets/css/**/* (to match all files)

Also it is not good idea to use same input and output directory. Because after first run of task your source file will be ruined.

Maybe better idea is to use structure similar to that:

project-home/
  ├── ...
  ├── src/
  │   ├── css/
  │   ├── js/
  │   ├── images/
  ├── assets/
  │   ├── css/
  │   ├── js/
  │   ├── images/
RAMe0
  • 1,415
  • 2
  • 19
  • 31
  • I have assets folder why you're using src folder also in above sample dir structure. – Husna Jul 04 '19 at 06:09
  • i change dir path like this `./assets/css/*.css` after this when i run gulp empty only `[11:47:32] Starting 'empty'...` shows it is not finished empty. I waited 5 min still nothing is coming. why this is happens – Husna Jul 04 '19 at 06:26
  • @Husna, you have to separate `src` and `dest` (`assets` in your case) folders, otherwise your source file will be ruined. Imagine you are using not just `autprrefixer`, but also some minification tool. In that case, after runing task, your source css will be minified. – RAMe0 Jul 04 '19 at 09:53
  • @Husna, As for the second question, my only assumption is that you are runing watch task (`gulp.watch()`) indtead of a task. `Watch` tasks never ends (until exception or stop manualy). They watching files you are provided and run task when something changed. – RAMe0 Jul 04 '19 at 10:02
  • @RAAMeo I have changed my dir path as you can say and run the gulp nothing will happen. In assets my original files are there now I added one more folder src. And in gulp.js `gulp.task('test', function () { return gulp.src('./assets/css/*.css', {allowEmpty: true}) .pipe(postcss( [ autoprefixer] )) .pipe(gulp.dest('./assets/css/*.css')); });` this is my code. And i have tried using watch(); getting error then i used task(); – Husna Jul 09 '19 at 07:58
  • @Husna, firs argument for `gulp.dest()` have to be path of the output directory not filepath or wildcard. Change this `.pipe(gulp.dest('./assets/css/*.css'));` to `.pipe(gulp.dest('./assets/css/'));` – RAMe0 Jul 15 '19 at 11:30