如何解决Gulp js配置文件:如何仅在buid脚本上复制文件
我当前的gulp文件有两个问题。
我想创建一个脚本'npm prod',它将执行3件事:
- 将我所有的php文件移到dist文件夹并保留文件夹结构
- 删除文件“ style.css.map”(不应在生产站点上)
- 缩小css文件
谢谢:)
我当前的gulp文件:
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const autoPrefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const changed = require('gulp-changed');
const imageMin = require('gulp-imagemin');
const util = require('gulp-util');
const path = require('path');
const config = {
production: !!util.env.production
}
function style(){
return gulp.src('./src/sass/**/*.scss')
.pipe(sourceMaps.init({loadMaps: true}))
.pipe(sass({
outputStyle: 'expanded'
}).on('error',sass.logError))
.pipe(autoPrefixer('last 2 versions'))
.pipe(concat('style.css'))
.pipe(config.production ? cleanCSS() : util.noop())
.pipe(config.production ? util.noop() : sourceMaps.write('.'))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream())
}
function javaScript(){
return gulp.src('./src/js/**/*.js')
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
}
function imageMinFunction(){
return gulp.src('./src/images/*')
.pipe(changed('./dist/images/'))
.pipe(imageMin([
imageMin.gifsicle({interlaced: true}),imageMin.mozjpeg({quality: 75,progressive: true}),imageMin.optipng({optimizationLevel: 5}),imageMin.svgo({
plugins: [
{removeViewBox: true},{cleanupIDs: false}
]
})
])
)
.pipe(gulp.dest('./dist/images'))
}
function copyFiles(){
var sourceFiles = [
path.join(__dirname,'./*.php'),path.join(__dirname,'./inc/**/*.php')
]
return gulp
.src(sourceFiles,{base: '.'})
.pipe(gulp.dest(path.join(__dirname,'./dist/')))
}
function watch(){
browserSync.init({
open: 'external',proxy: 'http://localhost/gulpy',port: 8080
});
gulp.watch('./src/sass/**/*.scss',style);
gulp.watch('./src/images/*',imageMinFunction);
gulp.watch('./**/*.php',copyFiles).on('change',browserSync.reload);
gulp.watch('./src/js/**/*.js',javaScript).on('change',browserSync.reload);
}
var build = gulp.parallel(watch);
gulp.task('default',build);
还有我的package.json文件:
{
"name": "","version": "1.0.0","description": "starter kit for projects","main": "index.php","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","prod": "gulp --production"
},"author": "","license": "ISC","devDependencies": {
"browser-sync": "^2.26.7","gulp": "^4.0.2","gulp-autoprefixer": "^7.0.1","gulp-changed": "^4.0.2","gulp-clean-css": "^4.3.0","gulp-concat": "^2.6.1","gulp-imagemin": "^7.1.0","gulp-sass": "^4.1.0","gulp-sourcemaps": "^2.6.5","gulp-uglify": "^3.0.2","gulp-util": "^3.0.8"
},"dependencies": {}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。