Post CSS critical split












-1















I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.



Name of gulp task is "criticalCSS".
Why its not working?






gulp.task('criticalCSS', function () {
return gulp.src(['css/style.css','!css/*-critical.css'])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(postcss([require('postcss-critical-split')]))
.pipe(sourcemaps.write('source-maps'))
.pipe(gulp.dest('css'));
});





Thanks for any help.



My gulpfile looks https://jsfiddle.net/ydhfjwdw/










share|improve this question



























    -1















    I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.



    Name of gulp task is "criticalCSS".
    Why its not working?






    gulp.task('criticalCSS', function () {
    return gulp.src(['css/style.css','!css/*-critical.css'])
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(postcss([require('postcss-critical-split')]))
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('css'));
    });





    Thanks for any help.



    My gulpfile looks https://jsfiddle.net/ydhfjwdw/










    share|improve this question

























      -1












      -1








      -1








      I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.



      Name of gulp task is "criticalCSS".
      Why its not working?






      gulp.task('criticalCSS', function () {
      return gulp.src(['css/style.css','!css/*-critical.css'])
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
      .pipe(sourcemaps.write('source-maps'))
      .pipe(gulp.dest('css'));
      });





      Thanks for any help.



      My gulpfile looks https://jsfiddle.net/ydhfjwdw/










      share|improve this question














      I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.



      Name of gulp task is "criticalCSS".
      Why its not working?






      gulp.task('criticalCSS', function () {
      return gulp.src(['css/style.css','!css/*-critical.css'])
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
      .pipe(sourcemaps.write('source-maps'))
      .pipe(gulp.dest('css'));
      });





      Thanks for any help.



      My gulpfile looks https://jsfiddle.net/ydhfjwdw/






      gulp.task('criticalCSS', function () {
      return gulp.src(['css/style.css','!css/*-critical.css'])
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
      .pipe(sourcemaps.write('source-maps'))
      .pipe(gulp.dest('css'));
      });





      gulp.task('criticalCSS', function () {
      return gulp.src(['css/style.css','!css/*-critical.css'])
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
      .pipe(sourcemaps.write('source-maps'))
      .pipe(gulp.dest('css'));
      });






      node.js gulp postcss






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 18 '16 at 1:26









      mirekmirek

      22




      22
























          2 Answers
          2






          active

          oldest

          votes


















          0














          Use gulp-postcss instead of postcss'






          share|improve this answer










          New contributor




          Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.




























            -1














            Solution:






            gulp.task('criticalCSS', function () {
            var processors = [
            postcssCriticalSplit({
            'output': 'critical',
            'startTag': 'critical:start',
            'stopTag': 'critical:end'
            })
            ];

            return gulp.src(['css/style.css'])
            .pipe(postcss(processors))
            .pipe(cssnano())
            .pipe(rename({
            suffix: '.critical'
            }))
            .pipe(gulp.dest('css'));
            });








            share|improve this answer























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41204688%2fpost-css-critical-split%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              Use gulp-postcss instead of postcss'






              share|improve this answer










              New contributor




              Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.

























                0














                Use gulp-postcss instead of postcss'






                share|improve this answer










                New contributor




                Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.























                  0












                  0








                  0







                  Use gulp-postcss instead of postcss'






                  share|improve this answer










                  New contributor




                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.










                  Use gulp-postcss instead of postcss'







                  share|improve this answer










                  New contributor




                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.









                  share|improve this answer



                  share|improve this answer








                  edited Jan 18 at 17:29









                  Hongarc

                  2,2641725




                  2,2641725






                  New contributor




                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.









                  answered Jan 18 at 13:07









                  Martin KemterMartin Kemter

                  1




                  1




                  New contributor




                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.





                  New contributor





                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.






                  Martin Kemter is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.

























                      -1














                      Solution:






                      gulp.task('criticalCSS', function () {
                      var processors = [
                      postcssCriticalSplit({
                      'output': 'critical',
                      'startTag': 'critical:start',
                      'stopTag': 'critical:end'
                      })
                      ];

                      return gulp.src(['css/style.css'])
                      .pipe(postcss(processors))
                      .pipe(cssnano())
                      .pipe(rename({
                      suffix: '.critical'
                      }))
                      .pipe(gulp.dest('css'));
                      });








                      share|improve this answer




























                        -1














                        Solution:






                        gulp.task('criticalCSS', function () {
                        var processors = [
                        postcssCriticalSplit({
                        'output': 'critical',
                        'startTag': 'critical:start',
                        'stopTag': 'critical:end'
                        })
                        ];

                        return gulp.src(['css/style.css'])
                        .pipe(postcss(processors))
                        .pipe(cssnano())
                        .pipe(rename({
                        suffix: '.critical'
                        }))
                        .pipe(gulp.dest('css'));
                        });








                        share|improve this answer


























                          -1












                          -1








                          -1







                          Solution:






                          gulp.task('criticalCSS', function () {
                          var processors = [
                          postcssCriticalSplit({
                          'output': 'critical',
                          'startTag': 'critical:start',
                          'stopTag': 'critical:end'
                          })
                          ];

                          return gulp.src(['css/style.css'])
                          .pipe(postcss(processors))
                          .pipe(cssnano())
                          .pipe(rename({
                          suffix: '.critical'
                          }))
                          .pipe(gulp.dest('css'));
                          });








                          share|improve this answer













                          Solution:






                          gulp.task('criticalCSS', function () {
                          var processors = [
                          postcssCriticalSplit({
                          'output': 'critical',
                          'startTag': 'critical:start',
                          'stopTag': 'critical:end'
                          })
                          ];

                          return gulp.src(['css/style.css'])
                          .pipe(postcss(processors))
                          .pipe(cssnano())
                          .pipe(rename({
                          suffix: '.critical'
                          }))
                          .pipe(gulp.dest('css'));
                          });








                          gulp.task('criticalCSS', function () {
                          var processors = [
                          postcssCriticalSplit({
                          'output': 'critical',
                          'startTag': 'critical:start',
                          'stopTag': 'critical:end'
                          })
                          ];

                          return gulp.src(['css/style.css'])
                          .pipe(postcss(processors))
                          .pipe(cssnano())
                          .pipe(rename({
                          suffix: '.critical'
                          }))
                          .pipe(gulp.dest('css'));
                          });





                          gulp.task('criticalCSS', function () {
                          var processors = [
                          postcssCriticalSplit({
                          'output': 'critical',
                          'startTag': 'critical:start',
                          'stopTag': 'critical:end'
                          })
                          ];

                          return gulp.src(['css/style.css'])
                          .pipe(postcss(processors))
                          .pipe(cssnano())
                          .pipe(rename({
                          suffix: '.critical'
                          }))
                          .pipe(gulp.dest('css'));
                          });






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Dec 20 '16 at 13:53









                          mirekmirek

                          22




                          22






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41204688%2fpost-css-critical-split%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Liquibase includeAll doesn't find base path

                              How to use setInterval in EJS file?

                              Petrus Granier-Deferre