在gulp压缩js文件

时间:2018-02-05 14:06:42

标签: javascript node.js gulp zurb-foundation

我正在使用奠基。而且还有压缩模块。当我使用“npm start”时,我得到了liverealod,我的文件在飞行中压缩,一切正常。但是,当我需要部署我的网站时,我正在使用“npm run package”,然后我的终端使用uglify-js模块抛出错误。

    { Error
    at new JS_Parse_Error (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1542:11)
    at parse_error (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1667:9)
    at Object.next_token [as input] (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1946:9)
    at next (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2075:25)
    at maybe_conditional (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2834:13)
    at maybe_assign (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2856:20)
    at expression (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2875:20)
    at expr_atom (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2608:26)
    at maybe_unary (eval at <anonymous> (F:\Ampps\www\atmosfera\wp-content\themes\FoundationPress\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2792:19)
  message: 'F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\app.js: Unexpected character \'`\'',
  fileName: 'F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\app.js',
  lineNumber: 105,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1542:11)\n    at parse_error (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1667:9)\n    at Object.next_token [as input] (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1946:9)\n    at next (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2075:25)\n    at maybe_conditional (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2834:13)\n    at maybe_assign (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2856:20)\n    at expression (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2875:20)\n    at expr_atom (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2608:26)\n    at maybe_unary (eval at <anonymous> (F:\\Ampps\\www\\atmosfera\\wp-content\\themes\\FoundationPress\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2792:19)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }
[18:49:23] Version: webpack 3.10.0
 Asset     Size  Chunks                    Chunk Names
app.js  1.15 MB       0  [emitted]  [big]  app
[18:49:41] gulp-imagemin: Minified 102 images (saved 1.6 MB - 13%)
[18:49:41] Finished 'images' after 22 s
[18:49:41] The following tasks did not complete: package, build, <parallel>, webpack:build
[18:49:41] Did you forget to signal async completion?

这是我的gulpfile.babel.js文件:

'use strict';

import plugins       from 'gulp-load-plugins';
import yargs         from 'yargs';
import browser       from 'browser-sync';
import gulp          from 'gulp';
import rimraf        from 'rimraf';
import yaml          from 'js-yaml';
import fs            from 'fs';
import dateFormat    from 'dateformat';
import webpackStream from 'webpack-stream';
import webpack2      from 'webpack';
import named         from 'vinyl-named';
import log           from 'fancy-log';
import colors        from 'ansi-colors';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Check for --development flag unminified with sourcemaps
const DEV = !!(yargs.argv.dev);

// Load settings from settings.yml
const { BROWSERSYNC, COMPATIBILITY, REVISIONING, PATHS } = loadConfig();

// Check if file exists synchronously
function checkFileExists(filepath) {
  let flag = true;
  try {
    fs.accessSync(filepath, fs.F_OK);
  } catch(e) {
    flag = false;
  }
  return flag;
}

// Load default or custom YML config file
function loadConfig() {
  log('Loading config file...');

  if (checkFileExists('config.yml')) {
    // config.yml exists, load it
    log(colors.bold(colors.cyan('config.yml')), 'exists, loading', colors.bold(colors.cyan('config.yml')));
    let ymlFile = fs.readFileSync('config.yml', 'utf8');
    return yaml.load(ymlFile);

  } else if(checkFileExists('config-default.yml')) {
    // config-default.yml exists, load it
    log(colors.bold(colors.cyan('config.yml')), 'does not exist, loading', colors.bold(colors.cyan('config-default.yml')));
    let ymlFile = fs.readFileSync('config-default.yml', 'utf8');
    return yaml.load(ymlFile);

  } else {
    // Exit if config.yml & config-default.yml do not exist
    log('Exiting process, no config file exists.');
    log('Error Code:', err.code);
    process.exit(1);
  }
}

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "images", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))

    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
const webpack = {
  config: {
    module: {
      rules: [
        {
          test: /.js$/,
          loader: 'babel-loader',
          exclude: /node_modules(?!\/foundation-sites)/,
        },
      ],
    },
    externals: {
      jquery: 'jQuery',
    },
  },

  changeHandler(err, stats) {
    log('[webpack]', stats.toString({
      colors: true,
    }));
    
    browser.reload();
  },

  build() {
    return gulp.src(PATHS.entries)
      .pipe(named())
      .pipe(webpackStream(webpack.config, webpack2))
      .pipe($.if(PRODUCTION, $.uglify()
        .on('error', e => { console.log(e); }),
      ))
      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
      .pipe(gulp.dest(PATHS.dist + '/assets/js'))
      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
  },

  watch() {
    const watchConfig = Object.assign(webpack.config, {
      watch: true,
      devtool: 'inline-source-map',
    });

    return gulp.src(PATHS.entries)
      .pipe(named())
      .pipe(webpackStream(watchConfig, webpack2, webpack.changeHandler)
        .on('error', (err) => {
          log('[webpack:error]', err.toString({
            colors: true,
          }));
        }),
      )
      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
  },
};

gulp.task('webpack:build', webpack.build);
gulp.task('webpack:watch', webpack.watch);

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/images/**/*')
    .pipe($.if(PRODUCTION, $.imagemin({
      progressive: true
    })))
    .pipe(gulp.dest(PATHS.dist + '/assets/images'));
}

// Create a .zip archive of the theme
function archive() {
  var time = dateFormat(new Date(), "yyyy-mm-dd_HH-MM");
  var pkg = JSON.parse(fs.readFileSync('./package.json'));
  var title = pkg.name + '_' + time + '.zip';

  return gulp.src(PATHS.package)
    .pipe($.zip(title))
    .pipe(gulp.dest('packaged'));
}

// PHP Code Sniffer task
gulp.task('phpcs', function() {
  return gulp.src(PATHS.phpcs)
    .pipe($.phpcs({
      bin: 'wpcs/vendor/bin/phpcs',
      standard: './codesniffer.ruleset.xml',
      showSniffCode: true,
    }))
    .pipe($.phpcs.reporter('log'));
});

// PHP Code Beautifier task
gulp.task('phpcbf', function () {
  return gulp.src(PATHS.phpcs)
  .pipe($.phpcbf({
    bin: 'wpcs/vendor/bin/phpcbf',
    standard: './codesniffer.ruleset.xml',
    warningSeverity: 0
  }))
  .on('error', $.util.log)
  .pipe(gulp.dest('.'));
});

// Start BrowserSync to preview the site in
function server(done) {
  browser.init({
    proxy: BROWSERSYNC.url,

    ui: {
      port: 8080
    },

  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/assets/scss/**/*.scss', sass)
    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
  gulp.watch('**/*.php', reload)
    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
  gulp.watch('src/assets/images/**/*', gulp.series(images, browser.reload));
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
  gulp.series(clean, gulp.parallel(sass, 'webpack:build', images, copy)));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, gulp.parallel('webpack:watch', watch)));

// Package task
gulp.task('package',
  gulp.series('build', archive));

这是我的config.yml文件

    # Browsersync config
BROWSERSYNC:
  # URL of local development server goes here (ex. http://localsite.dev)
  url: "http://localhost/atmosfera/"

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "ios >= 7"

# Set to true if you want static asset revisioning, helpful for cache busting
REVISIONING: false  

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{images,images/**/*,js,js/**/*,scss,scss/**/*}"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
  # Paths to JavaScript entry points for webpack to bundle modules
  entries:
    - "src/assets/js/app.js"
  # Paths for the package task to include/exclude in .zip archive
  package:
    - "**/*"
    - "!**/node_modules/**"
    - "!**/packaged/**"
    - "!**/src/**"
    - "!**/codesniffer.ruleset.xml"
    - "!**/composer.json"
    - "!**/composer.lock"
    - "!**/config.yml"
    - "!**/config.default.yml"
    - "!**/gulpfile.babel.js"
    - "!**/package.json"
    - "!**/package-lock.json"
    - "!**/webpack.config.js"
  # Paths for PHP CodeSniffer
  phpcs:
    - "**/*.php"
    - "!wpcs"
    - "!wpcs/**"  

由于这个问题,我无法部署我的网站。我是节点js的新手,gulp可以有人说如何修复它吗?

1 个答案:

答案 0 :(得分:0)