Gulp开发工作流和“dist”文件夹
Gulp开发工作流和“dist”文件夹
提问于 2018-04-17 02:02:39
我对gulp比较陌生，我将它作为一个任务运行器来连接和编译.js和sass/css文件。这些方面目前正在开发环境中工作。
我搞不懂的是一个工作流程问题。现在，我的连接文件位于以下文件夹中：
-css (myapp.css)
-js (myappconcat.js)如果我在本地工作，我还不想为了调试目的而缩小它们(对吗？)。
然而，在阅读gulp时，我发现构建任务通常被设置为将资产缩小到“dist”文件夹中进行生产。如何在我的HTML文件中管理它？
例如，在我的开发HTML文件中，我将包含CSS和js，如下所示：
<link href="/css/myapp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/myappconcat.js"></script>但是，当我将我的精简文件构建到一个'dist‘目录中时，我将不得不更改上述includes中每个HTML文件的路径。
如何在不更改HTML中每个include中的路径的情况下管理dist文件夹的gulp构建？类似地，当我为了生产而缩小时，我不是也必须在HTML include中更改.js和CSS文件名吗？或者我应该在开发中使用精简文件？
编辑:这是基本的网站结构：
wwwroot
-.html files
- gulpfile.js
- package.json
/css
-main.css
/dist
/js
/scss 和gulpfile.js
// Required gulp modules
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
maps = require('gulp-sourcemaps'),
del = require('del'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
gutil = require( 'gulp-util' ),
merge = require('merge-stream'),
imagemin = require('gulp-imagemin'),
cleanCSS = require('gulp-clean-css');
// error reporter in progress
var reportError = function( err ) {
gutil.beep();
var title = 'Error';
if( err.plugin === 'gulp-sass' ) {
title = 'SCSS Compilation Error';
}
var msg = '\n============================================\n\n';
msg += title += '\n\n';
msg += err.message + '\n\n';
msg += '============================================';
gutil.log( gutil.colors.red( msg ) );
if( err.plugin === 'gulp-sass' ) {
this.emit('end');
}
};
// Concatenate .js files with lint-js as the dependency
gulp.task("concatScripts", ["lint-js"], function() {
return gulp.src([
'js/*.js'
,'node_modules/jquery-placeholder/jquery.placeholder.js'
])
.pipe(maps.init())
.pipe(concat('zConcat.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('dist/js'));//write to separate dir than src otherwise
overwrites itself!
});
// Minify .js files with concatscripts as the dependency
gulp.task("minifyScripts", ["concatScripts"], function() {
return gulp.src("dist/js/zConcat.js")
.pipe(uglify())
.pipe(rename('zConcat.js'))
.pipe(gulp.dest('dist/js'));
});
// .js Linter for catching errors when any .js changes
gulp.task('lint-js', function () {
return gulp.src([
'js/*.js', // all custom .js
//'!_js/public/js/html5shiv.js', // ignore shiv
])
.pipe(jshint())
.pipe(jshint.reporter(stylish)); // color-coded line by line errors
});
// Compile sass files
gulp.task('compileSass', function() {
return gulp.src("scss/main.scss")
.pipe(maps.init())
.pipe(sass(
{
outputStyle: 'expanded'
}
).on( 'error', reportError) ) //sass.logError
.pipe(maps.write('./'))
.pipe(gulp.dest('css'));
});
// Minify CSS after compiling
gulp.task('minifyCSS', () => {
return gulp.src('css/*.css')
.pipe(maps.init())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('main.min.css'))
.pipe(maps.write('./'))
.pipe(gulp.dest('css'));
});
// Watch and process SASS and .js file changes
gulp.task('watchFiles', function() {
gulp.watch(['scss/**/*.scss','scss/*.scss'], ['compileSass']);
gulp.watch( 'css/*.css', ['minifyCSS']);
gulp.watch('js/**/*.js', ['concatScripts']);
});回答 1
Stack Overflow用户
发布于 2019-03-28 03:57:11
这可能有点晚了，但没人接。
对于我来说，我创建了两个生产文件(如果输出是多个文件，则创建两个文件夹，每个文件夹包含一组文件)。一个是缩小的，另一个不是。
出于开发和测试的目的，我使用非最小化版本。一旦产品准备好投入生产，我就会重新测试，但使用的是精简版本，通常这就是我发布的版本。
因此，我编写脚本以生成两个文件(如果要生成的文件不止一个，则为文件集)。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49863597
复制相关文章
相似问题