Minify css + Gulp

1cosmwyk  于 9个月前  发布在  Gulp
关注(0)|答案(3)|浏览(134)

我有这个gulpfile.js来编译css,但我也想缩小我的css。我试图运行许多不同的代码,我发现在互联网上,但没有一个作品。任何人可以帮助我吗?谢谢

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', gulp.series(function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
}));

gulp.task('watch', gulp.series(function() {
    gulp.watch(['scss/*.scss'], gulp.parallel(['sass']));
}));

gulp.task('default', gulp.series(['sass', 'watch']));

字符串

avwztpqn

avwztpqn1#

Try This
i am sharing two function one for css and and another for sass
run this command

个字符
//复制这段代码,并设置

const { src, dest } = require("gulp");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
sass.compiler = require("node-sass");


function css() {
    return src("src/css/*.css")
        .pipe(concat("style.css"))
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: "compressed" //expand or compact or compressed
            }).on("error", sass.logError)
        )
        .pipe(
            autoprefixer({
                cascade: true
            })
        )
        .pipe(dest("build/css/"));
}

function scss() {
    return src('src/scss/style.scss') // import your all file in style.scss
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: 'compressed' // you can set "expand or compact or compressed" view 
            })
                .on('error', sass.logError)
        ).pipe(
            autoprefixer({
                cascade: true
            })
        ).pipe(dest('build/scss/'));
}

exports.css = css;
exports.scss= scss;

7xllpg7q

7xllpg7q2#

要修复代码,请尝试:

gulp.task('sass', function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    gulp.watch(['scss/*.scss'], gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

字符串
但这种函数形式更好:

// renamed since your plugin name is apparently `sass` as well
function sass2css() {   
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
};

function watch() {
    gulp.watch(['scss/*.scss'], gulp.series(sass2css));
});

gulp.task('default', gulp.series(sass2css, watch));

edqdpe6u

edqdpe6u3#

这是我的gulp文件,它编译并缩小了css和js(它也有一些图像和php文件的数据,但它们没有使用)

const gulp = require('gulp'),
  gutil = require('gulp-util'),
  touch = require('gulp-touch-cmd'),
  plugin = require('gulp-load-plugins')(),
  merge = require('merge-stream');

// Select Foundation components, remove components project will not use
const SOURCE = {
  scripts: [
    // Place custom JS here, files will be concantonated,
    // minified if ran with --production
    'assets/scripts/**/*.js',
  ],

  // Scss files will be concantonated, minified if ran with --production
  styles: 'assets/style/scss/**/*.scss',

  // Images placed here will be optimized
  images: 'assets/images/src/**/*',

  php: '**/*.php'
};

const ASSETS = {
  styles: 'assets/style/',
  stylesDist: 'assets/dist/style',
  scripts: 'assets/scripts/',
  scriptsDist: 'assets/dist/scripts',
  images: 'assets/images/',
  all: 'assets/dist/'
};

gulp.task('log', function() {
  console.log(ASSETS.styles);
});

// Compile Sass, Autoprefix and minify
gulp.task('styles', function () {

  const bulk = gulp.src(SOURCE.styles);

  return merge(bulk)
    .pipe(plugin.plumber(function (error) {
      gutil.log(gutil.colors.red(error.message));
      this.emit('end');
    }))
    .pipe(plugin.sourcemaps.init())
    .pipe(plugin.sass())
    .pipe(plugin.autoprefixer({
      browsers: [
        'last 2 versions',
        'ie >= 9',
        'ios >= 7'
      ],
      cascade: false
    }))
    .pipe(plugin.cssnano({ safe: true, minifyFontValues: { removeQuotes: false } }))
    .pipe(plugin.sourcemaps.write('.'))
    .pipe(gulp.dest(ASSETS.stylesDist))
    .pipe(touch());
});

// GULP FUNCTIONS
// JSHint, concat, and minify JavaScript
gulp.task('scripts', function () {

  // Use a custom filter so we only lint custom JS

  return gulp.src(SOURCE.scripts)
    .pipe(plugin.plumber(function (error) {
      gutil.log(gutil.colors.red(error.message));
      this.emit('end');
    }))
    .pipe(plugin.sourcemaps.init())
    .pipe(plugin.babel({
      presets: ['es2015'],
      compact: true,
      ignore: ['what-input.js']
    }))
    .pipe(plugin.concat('scripts.js'))
    .pipe(plugin.uglify())
    .pipe(plugin.sourcemaps.write('.')) // Creates sourcemap for minified JS
    .pipe(gulp.dest(ASSETS.scriptsDist))
    .pipe(touch());
});

// Watch files for changes (without Browser-Sync)
gulp.task('watch', function () {
  // Watch .scss files
  gulp.watch(SOURCE.styles, gulp.parallel('styles'));

  // Watch scripts files
  gulp.watch(SOURCE.scripts, gulp.parallel('scripts'));
});

字符串
这是我用过的另一个:

// Initialize modules
// Importing specific gulp API functions lets us write them below as series()
//  instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const replace = require('gulp-replace');

// File paths
const files = { 
  scssPath: 'site/templates/styles/sass/**/*.scss',
  jsPath: 'site/templates/scripts/**/*.js'
}

// Sass task: compiles the style.scss file into style.css
function scssTask(){    
  return src(files.scssPath)
    .pipe(sourcemaps.init()) // initialize sourcemaps first
    .pipe(sass()) // compile SCSS to CSS
    .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
    .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
    .pipe(dest('site/templates/dist')
  ); // put final CSS in site/templates/dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
  return src([
    files.jsPath
    //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
    ])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(dest('site/templates/dist')
  );
}

// Cachebust
const cbString = new Date().getTime();
function cacheBustTask(){
  return src(['index.html'])
    .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
    .pipe(dest('.'));
}

// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
  watch([files.scssPath, files.jsPath], 
    series(
      parallel(scssTask, jsTask)
    )
  );    
}

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
  parallel(scssTask, jsTask), 
  watchTask
);

相关问题