Gulp不创建CSS文件

当我创建我的sass文件时,他没有创建目录或css文件。

在index.html中,他指的是main.css,但是当我尝试打开该文件时,它告诉我它没有创建。

当我运行本地服务器时,它确实使页面样式化,但是当我将其上载到Web服务器时,它并没有使其样式化。

这是我的gulpfile.js:

// generated on 2019-11-07 using generator-webapp 4.0.0-6
const { src,dest,watch,series,parallel,lastRun } = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync');
const del = require('del');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const { argv } = require('yargs');

const $ = gulpLoadPlugins();
const server = browserSync.create();

const port = argv.port || 9000;

const isProd = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
const isDev = !isProd && !isTest;

function styles() {
  return src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.if(!isProd,$.sourcemaps.init()))
    .pipe($.sass.sync({
      outputStyle: 'expanded',precision: 10,includePaths: ['.']
    }).on('error',$.sass.logError))
    .pipe($.postcss([
      autoprefixer()
    ]))
    .pipe($.if(!isProd,$.sourcemaps.write()))
    .pipe(dest('.tmp/styles'))
    .pipe(server.reload({stream: true}));
};

function scripts() {
  return src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.if(!isProd,$.sourcemaps.init()))
    .pipe($.babel())
    .pipe($.if(!isProd,$.sourcemaps.write('.')))
    .pipe(dest('.tmp/scripts'))
    .pipe(server.reload({stream: true}));
};


const lintBase = files => {
  return src(files)
    .pipe($.eslint({ fix: true }))
    .pipe(server.reload({stream: true,once: true}))
    .pipe($.eslint.format())
    .pipe($.if(!server.active,$.eslint.failAfterError()));
}
function lint() {
  return lintBase('app/scripts/**/*.js')
    .pipe(dest('app/scripts'));
};
function lintTest() {
  return lintBase('test/spec/**/*.js')
    .pipe(dest('test/spec'));
};

function html() {
  return src('app/*.html')
    .pipe($.useref({searchPath: ['.tmp','app','.']}))
    .pipe($.if(/\.js$/,$.uglify({compress: {drop_console: true}})))
    .pipe($.if(/\.css$/,$.postcss([cssnano({safe: true,autoprefixer: false})])))
    .pipe($.if(/\.html$/,$.htmlmin({
      collapseWhitespace: true,minifyCSS: true,minifyJS: {compress: {drop_console: true}},processConditionalComments: true,removeComments: true,removeEmptyAttributes: true,removeScriptTypeAttributes: true,removeStyleLinkTypeAttributes: true
    })))
    .pipe(dest('dist'));
}

function images() {
  return src('app/images/**/*',{ since: lastRun(images) })
    .pipe($.imagemin())
    .pipe(dest('dist/images'));
};

function fonts() {
  return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe($.if(!isProd,dest('.tmp/fonts'),dest('dist/fonts')));
};

function extras() {
  return src([
    'app/*','!app/*.html'
  ],{
    dot: true
  }).pipe(dest('dist'));
};

function clean() {
  return del(['.tmp','dist'])
}

function measureSize() {
  return src('dist/**/*')
    .pipe($.size({title: 'build',gzip: true}));
}

const build = series(
  clean,parallel(
    lint,series(parallel(styles,scripts),html),images,fonts,extras
  ),measureSize
);

function startAppServer() {
  server.init({
    notify: false,port,server: {
      baseDir: ['.tmp','app'],routes: {
        '/node_modules': 'node_modules'
      }
    }
  });

  watch([
    'app/*.html','app/images/**/*','.tmp/fonts/**/*'
  ]).on('change',server.reload);

  watch('app/styles/**/*.scss',styles);
  watch('app/scripts/**/*.js',scripts);
  watch('app/fonts/**/*',fonts);
}

function startTestServer() {
  server.init({
    notify: false,ui: false,server: {
      baseDir: 'test',routes: {
        '/scripts': '.tmp/scripts','/node_modules': 'node_modules'
      }
    }
  });

  watch('app/scripts/**/*.js',scripts);
  watch(['test/spec/**/*.js','test/index.html']).on('change',server.reload);
  watch('test/spec/**/*.js',lintTest);
}

function startDistServer() {
  server.init({
    notify: false,server: {
      baseDir: 'dist',routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

let serve;
if (isDev) {
  serve = series(clean,parallel(styles,scripts,fonts),startAppServer);
} else if (isTest) {
  serve = series(clean,startTestServer);
} else if (isProd) {
  serve = series(build,startDistServer);
}

exports.serve = serve;
exports.build = build;
exports.default = build;

我的package.json:

{
  "private": true,"engines": {
    "node": ">=4"
  },"dependencies": {},"devDependencies": {
    "@babel/core": "^7.4.5","@babel/preset-env": "^7.4.5","autoprefixer": "^9.5.1","browser-sync": "^2.26.5","chai": "^4.2.0","cross-env": "^5.2.0","cssnano": "^4.1.10","del": "^4.1.1","gulp": "^4.0.2","gulp-babel": "^8.0.0","gulp-cli": "^2.2.0","gulp-eslint": "^5.0.0","gulp-filter": "^6.0.0","gulp-htmlmin": "^5.0.1","gulp-if": "^2.0.2","gulp-imagemin": "^6.0.0","gulp-load-plugins": "^1.6.0","gulp-plumber": "^1.2.1","gulp-postcss": "^8.0.0","gulp-sass": "^4.0.2","gulp-size": "^3.0.0","gulp-sourcemaps": "^2.6.5","gulp-uglify": "^3.0.2","gulp-useref": "^3.1.6","mocha": "^6.2.2","yargs": "13.2.4"
  },"scripts": {
    "serve:test": "cross-env NODE_ENV=test gulp serve","serve:dist": "cross-env NODE_ENV=production gulp serve","start": "gulp serve","build": "cross-env NODE_ENV=production gulp","test": "npm run serve:test","tasks": "gulp --tasks"
  },"browserslist": [
    "> 1%","last 2 versions","Firefox ESR"
  ],"eslintConfig": {
    "parserOptions": {
      "sourceType": "module"
    },"env": {
      "es6": true,"node": true,"browser": true
    },"rules": {
      "quotes": [
        2,"single"
      ]
    }
  }
}

zhongquanming 回答:Gulp不创建CSS文件

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3141935.html

大家都在问