Пытаюсь минимизировать файлы css и js, но ничего не получается, запускаю gulp useref, а он мне в ответ
[14:14:28] Using gulpfile C:\localserver\OSPanel\domains\project__gulp\gulpfile.js
[14:14:28] Starting 'useref'...
[14:14:28] 'useref' errored after 163 μs
[14:14:28] TypeError: useref.assets is not a function
at Gulp. (C:\localserver\OSPanel\domains\project__gulp\gulpfile.js:75:23)
at module.exports (C:\localserver\OSPanel\domains\project__gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\localserver\OSPanel\domains\project__gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\localserver\OSPanel\domains\project__gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\localserver\OSPanel\domains\project__gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\alex2\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (internal/process/next_tick.js:61:11)
at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
at startup (internal/bootstrap/node.js:266:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
Вот код JS
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// другие ресурсы
})
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
// ...
})
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Обновляем браузер при любых изменениях в HTML или JS
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Обновляем браузер при любых изменениях в HTML или JS
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('useref', function(){
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
// другие подключения...
var gulpIf = require('gulp-if');
gulp.task('useref', function(){
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
// Если JS то запускаем uglify()
.pipe(gulpIf('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
gulp.task('useref', function(){
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
// Минифицируем только CSS файлы
.pipe(gulpIf('*.css', minifyCSS()))
// Uglifies only if it's a Javascript file
.pipe(gulpIf('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
Мало разбираюсь так как только учусь
Вот HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--build:js js/main.min.js -->
<link href="css/main.css" rel="stylesheet">
<link href="css/print.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
This is a gulp starter
<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
Простой
