Gulp项目在本地运行但无法生成

nukf8bse  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(213)

我正在尝试建立一个网站与克隆从https://github.com/cssninjaStudio/krypton
我可以在yarn run dev命令正常工作的情况下在本地运行项目,但当我尝试构建应用程序以托管在带有yarn build or yarn run prod的VPS中时,会出现错误
Task never defined: prod
这里是我的gulp.js

const del = require('del');
const options = require("./config");
const browserSync = require('browser-sync').create();

const sass = require('gulp-sass');
const bourbon = require('node-bourbon').includePaths;
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const cleanCSS = require('gulp-clean-css');
const purgecss = require('gulp-purgecss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const panini = require('panini');

const browserify = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream");
const nodepath = 'node_modules/';

sass.compiler = require('sass');

//Note : Webp still not supported in major browsers including forefox
//const webp = require('gulp-webp'); //For converting images to WebP format
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P 

//Load Previews on Browser on dev
function livePreview(done) {
  browserSync.init({
    server: {
      baseDir: options.paths.dist.base
    },
    port: options.config.port || 5000
  });
  done();
}

//Copy latest installed Bulma
function setupBulma() {
  console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n");
  return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
    .pipe(dest('src/sass/'));
}

//Compile Sass code
function compileSASS() {
  console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n");
  return src(['src/sass/bulma.sass'])
    .pipe(sass({
      outputStyle: 'compressed',
      sourceComments: 'map',
      sourceMap: 'sass',
      includePaths: bourbon
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(dest('dist/assets/css'))
    .pipe(browserSync.stream());
}

//Compile Scss code
function compileSCSS() {
  console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n");
  return src(['src/scss/main.scss'])
    .pipe(sass({
      outputStyle: 'compressed',
      sourceComments: 'map',
      sourceMap: 'scss',
      includePaths: bourbon
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(dest('dist/css'))
    .pipe(browserSync.stream());
}

//Compile HTML partials with Panini
function compileHTML() {
  console.log("\n\t" + logSymbols.info, "Compiling HTML..\n");
  panini.refresh();
  return src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      helpers: 'src/helpers/',
      data: 'src/data/'
    }))
    .pipe(dest('dist'))
    .pipe(browserSync.stream());
}

//Concat CSS Plugins
function concatCssPlugins() {
  console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n");
  return src([
    nodepath + 'simplebar/dist/simplebar.min.css',
    nodepath + 'plyr/dist/plyr.css',
    nodepath + 'codemirror/lib/codemirror.css',
    nodepath + 'codemirror/theme/shadowfox.css',
    'src/vendor/css/*',
  ])
    .pipe(sourcemaps.init())
    .pipe(concat('app.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(dest('dist/css'))
    .pipe(browserSync.stream());
}

//Reset Panini Cache
function resetPages(done) {
  console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n");
  panini.refresh();
  done();
}

//Triggers Browser reload
function previewReload(done) {
  console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n");
  browserSync.reload();
  done();
}

//Development Tasks
function devHTML() {
  return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base));
}

//Optimize images
function devImages() {
  return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img));
}

// Let's write our task in a function to keep things clean
function javascriptBuild() {
  // Start by calling browserify with our entry pointing to our main javascript file
  return (
    browserify({
      entries: [`${options.paths.src.js}/main.js`],
      // Pass babelify as a transform and set its preset to @babel/preset-env
      transform: [babelify.configure({ presets: ["@babel/preset-env"] })]
    })
      // Bundle it all up!
      .bundle()
      // Source the bundle
      .pipe(source("bundle.js"))
      // Then write the resulting files to a folder
      .pipe(dest(`dist/js`))
  );
}

function copyFonts() {
  console.log("\n\t" + logSymbols.info, "Copying fonts to dist folder.\n");
  return src([
    'src/fonts/*',
  ])
    .pipe(dest('dist/fonts'))
    .pipe(browserSync.stream());
}

//Copy data files
function copyData() {
  console.log("\n\t" + logSymbols.info, "Copying data files..\n");
  return src([
    'src/data/**/*',
  ])
    .pipe(dest('dist/data'))
    .pipe(browserSync.stream());
}

function watchFiles() {
  //watch('src/**/*.html', compileHTML);
  watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload));
  watch(['src/scss/**/*', 'src/scss/*'], compileSCSS);
  watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload));
  watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload));
  console.log("\n\t" + logSymbols.info, "Watching for Changes..\n");
}

function devClean() {
  console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n");
  return del([options.paths.dist.base]);
}

exports.setup = series(setupBulma);

exports.default = series(
  devClean, // Clean Dist Folder
  resetPages,
  parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
  livePreview, // Live Preview Build
  watchFiles // Watch for Live Changes
);

需要一些帮助来建立这个网站,并在VPS主机
提前致谢

j7dteeu8

j7dteeu81#

在Gulp文件中没有定义prod任务。dev任务是,因为它调用的是默认的gulp任务(不带参数的gulp调用的是位于gulp文件末尾的默认任务

exports.default = series(
  devClean, // Clean Dist Folder
  resetPages,
  parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
  livePreview, // Live Preview Build
  watchFiles // Watch for Live Changes
);

查看package.json文件,这是定义脚本名称的地方(例如dev和prod)。

"scripts": {
    "dev": "gulp",
    "build": "gulp prod",
    "prod": "gulp prod",
    "preinstall": "npx npm-force-resolutions"
  },

因此,您应该在gulp.js中创建一个prod方法,并且应该只为prod env调用usefull方法(删除livePreview和watch,您很可能只需要构建和部署。
我更喜欢这样任务定义,

gulp.task("prod", function (callback) {
    config.runCleanBuilds = true;

    return runSequence(
        "taskA",
        "taskB",
        "taskC",     
        callback);
});

但是你可以用他们在吞咽文件中的方法来做

exports.prod = series(
  devClean, // Clean Dist Folder
  resetPages,
  parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML)
);

相关问题