Gulp

Question

我安装了 gulp，这是我收到的错误。有人可以帮我吗？

我尝试删除 node_modules 并执行了 npm-install。但是还是不行。

这就是我的 gulp 文件的样子。

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var babelify = require('babelify');
var scssify = require('scssify');
var source = require('vinyl-source-stream');
var path = require('path');
var spawn = require('child_process').spawn;
var gls = require('gulp-live-server');
var commandLineArgs = require('command-line-args');
var sass = require('gulp-sass') ;
var notify = require("gulp-notify") ;
var bower = require('gulp-bower');
var runSequence = require('run-sequence');
var lodash = require('lodash');

var config = {
     sassPath: './gssp/client/style',
     bowerDir: './bower_components'
};

function onError(error) {
    gutil.log(error.message);
    console.log(error.toString());
}

var cli = commandLineArgs([
    { name: 'packages', alias: 'p', type: String, defaultValue: [""], multiple:true }
]);

var options = cli.parse();

gulp.task('bower', function() {
    return bower()
         .pipe(gulp.dest(config.bowerDir))
});

gulp.task('icons', function() {
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
        .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('embeddedIcons', function() {
    return gulp.src('./gssp/src/leafs/icon/fonts/**.*')
        .pipe(gulp.dest('./dist/src/leafs/icon/fonts'));
});

gulp.task('css',['bower'], function() {
    return gulp.src(config.sassPath + '/*.scss')
    .pipe(sass({
             outputStyle: 'compressed',
             includePaths: [
                 './gssp/client/style',
                 config.bowerDir + '/bootstrap-sass/assets/stylesheets',
                 config.bowerDir + '/font-awesome/scss',
             ]
         })
        .on('error', sass.logError))
         .pipe(gulp.dest('./dist/css'));
});

gulp.task('runLiveServer', function () {
    var server = gls.new(['gssp/index.js', options.packages.join(" ")]);
    server.start();

    gulp.watch(['./core/**/*.js','./gssp/**/*.scss'], ['build']);

    gulp.watch(['./dist/bundle.js'], function (file) {
        server.notify.apply(server, [file]);
    });
});

gulp.task('copyStatics', function() {
    return gulp.src('./core/server/public/**/*.*')
        .pipe(gulp.dest('./dist'));
});


gulp.task('build',['copyStatics', 'icons', 'embeddedIcons', 'css'], function () {
    return browserify({
        entries: './gssp/client/index.js',
        extensions: ['.jsx', '.js'],
        debug: true
    })
            .transform("babelify", {presets: ["es2015", "react", "stage-0"]})
      .bundle()
        .on('error', onError)
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./dist'));
});

gulp.task('run-wrapper', function(done) {
    var server = spawn('node', ['serviceWrapper.js'], {stdio: ['inherit']});
    server.stderr.on('data', function(data){
        process.stderr.write(data);
    });

    server.stdout.on('data', function(data) {
        process.stdout.write(data);
    });
    server.unref();
});

gulp.task('run', function(done) {
    console.log(lodash.concat);
    var child = spawn('node', lodash.union(['gssp/index.js'], options.packages), {stdio: ['inherit']});

    child.stderr.on('data', function(data){
        process.stderr.write(data);
    });

    child.stdout.on('data', function(data) {
        process.stdout.write(data);
    });
});

gulp.task('watch', function() {
  gulp.watch('./gssp/src/**/*.{js,jsx}', ['build']);
  gulp.watch('./gssp/src/**/*.scss', ['build']);
});

gulp.task('serve', function(done) {
    runSequence('build', ['run-wrapper', 'runLiveServer'],done)
});

gulp.task('start', function(done) {
    runSequence('build', ['run-wrapper', 'run'], done);
});

gulp.task('default', ['start']);

这就是我的 Bower 文件的样子。

{
  "name": "gssp-sales",
  "main": "index.js",
  "version": "0.6.0",
  "authors": [
    "Vamshi Gudipati"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap-sass": "bootstrap-sass-official#~3.3.6",
    "font-awesome": "fontawesome#~4.5.0"
  }
}

我安装了 gulp，这是我收到的错误。有人可以帮我吗？

我尝试删除 node_modules 并执行了 npm-install。但是还是不行。

这就是我的 gulp 文件的样子

Answer 1

在 dist/css 中打开您的 font-awesome.css 文件并在第一个块 @font-face 中查看 src 指向的位置。确保它指向正确的目录，您在其中提取了超棒的字体，错误就会消失。

对我来说，我必须在我的 gulpfile 中做这样的事情：

gulp.task('build-fonts', function(){
    return gulp.src(config.bowerDir + '/font-awesome/fonts')
            .pipe(gulp.dest('./dist/fonts'));
})

Gulp - 解析 style\main.scss 时出现意外字符“@”(1:0)

Gulp - Unexpected character '@' (1:0) while parsing style\main.scss

gulp-sass