创建一个gulpfile.js

时间:2019-02-19 14:58:00

标签: javascript gulp gulp-watch

我对gulp有问题:由于更新了它,因此在启动gulp watch时遇到一些错误。我认为我的gulpfile.js不再正确,但是我找不到问题。

有人可以帮助我创建功能正常的gulpfile吗?

这是我当前的文件

gulpfile.js:

 /*----------  Sources  ----------*/

// css
var css_src = ['css/style.scss'];
var jshint_src = ['scripts/app.js'];
var js_global_src = [
'scripts/vendor/jquery-3.1.1.min.js',
'scripts/vendor/svg4everybody.min.js',
'scripts/vendor/modernizr-custom.js'].concat(jshint_src);


/*----------  Destinations  ----------*/

var css_dir_final = '';
var js_file_final = 'scripts.min.js';
var js_dir_final = 'scripts/';


/*----------  Monitoring  ----------*/

var watch_css = 'css/**/*.scss';
var watch_js = ['scripts/**/*.js', '!scripts/scripts.min.js'];


var gulp        = require( 'gulp' ),
plumber         = require( 'gulp-plumber' ),
sass            = require( 'gulp-sass' ),
postcss         = require( 'gulp-postcss' ),
cssnano         = require( 'cssnano' ),
autoprefixer    = require( 'autoprefixer' ),
banner          = require( 'gulp-banner' ),
combineMq       = require( 'gulp-combine-mq' ),
jshint          = require( 'gulp-jshint' ),
concat          = require( 'gulp-concat' ),
uglify          = require( 'gulp-uglify' ),
watch           = require( 'gulp-watch' ),
purify          = require( 'gulp-purifycss');


/*----------  Post CSS plugins  ----------*/

var plugins = [ autoprefixer({ browsers: ['last 2 versions', 'iOS 7'] }), cssnano() ];



/*------ simplification du message d'erreur------*/

var display_error = function ( error ) {

    console.log( error.message );
    this.emit( 'end' );

};


gulp.task('css', function() {

gulp.src( css_src )
.pipe(plumber({ errorHandler: display_error }))
.pipe(sass({ precision: 3 }))
.pipe(combineMq())
.pipe(purify(['./public/app/**/*.js', './public/**/*.html']))
.pipe(postcss( plugins ))
.pipe(gulp.dest( css_dir_final ));
});


gulp.task('js', function() {

gulp.src( jshint_src )
.pipe(plumber({ errorHandler: display_error }))
.pipe(jshint())
.pipe(jshint.reporter( 'default' ));

gulp.src( js_global_src )
.pipe(plumber({ errorHandler: display_error }))
.pipe(concat( js_file_final ))
.pipe(uglify())
.pipe(gulp.dest( js_dir_final ));
});


gulp.task('watch', function(){

    gulp.watch( watch_css, gulp.series('css'));
    gulp.watch( watch_js, gulp.series('js'));

});

package.json:

    {
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Marion",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-banner": "^0.1.3",
    "gulp-combine-mq": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-jshint": "^2.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-purifycss": "^0.2.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "gulp-watch": "^5.0.1",
    "jshint": "^2.10.1",
    "node-sass": "^4.11.0"
  }
}

运行gulp时出现错误:

C:\xampp\htdocs\Projets\gulp-test  (gulp-test@1.0.0)  
λ gulp watch  
[15:33:47] Using gulpfile C:\xampp\htdocs\Projets\gulp-test\gulpfile.js  
[15:33:47] Starting 'watch'...  
[15:33:58] Starting 'css'...  
undefined:19:9: missing '}'  
undefined:19:9: missing '}'  

谢谢您的帮助,我非常感谢!

0 个答案:

没有答案