Question

我使用angular来运行我的dest应用。但我在这里遇到了一个问题。

所有bower_components文件都复制在bower_components ans js文件夹
我的js个文件（比如说2）我在dest文件夹中收到2 html个文件

css和dest文件也发生了同样的事情。

我要求的是：

html文件只应包含一个js和css以及app全部或缩小包含源地图。（如有必要）
< / LI>
基本上，gulp需要收集文件，我在.js中使用的文件，而不是从文件夹中收集gulp。

怎么做？

这是我当前的// gulp var gulp = require('gulp'); // plugins var connect = require('gulp-connect'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); var minifyCSS = require('gulp-minify-css'); var clean = require('gulp-clean'); var runSequence = require('run-sequence'); // tasks gulp.task('lint', function() { gulp.src(['./app/**/*.js', '!./app/bower_components/**']) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(jshint.reporter('fail')); }); gulp.task('clean', function() { gulp.src('./dist/*') .pipe(clean({force: true})); }); gulp.task('minify-css', function() { var opts = {comments:true,spare:true}; gulp.src(['./app/**/*.css', '!./app/bower_components/**']) .pipe(minifyCSS(opts)) .pipe(gulp.dest('./dist/')) }); gulp.task('minify-js', function() { gulp.src(['./app/**/*.js', '!./app/bower_components/**']) .pipe(uglify({ // inSourceMap: // outSourceMap: "app.js.map" })) .pipe(gulp.dest('./dist/')) }); gulp.task('copy-bower-components', function () { gulp.src('./app/bower_components/**') .pipe(gulp.dest('dist/bower_components')); }); gulp.task('copy-html-files', function () { gulp.src('./app/**/*.html') .pipe(gulp.dest('dist/')); }); gulp.task('connect', function () { connect.server({ root: 'app/', port: 8888 }); }); gulp.task('connectDist', function () { connect.server({ root: 'dist/', port: 9999 }); }); // default task gulp.task('default', ['lint', 'connect'] ); gulp.task('build', function() { runSequence( ['clean'], ['lint', 'minify-css', 'minify-js', 'copy-html-files', 'copy-bower-components', 'connectDist'] ); });代码：

{{1}}

Answer 1

您应该使用gulp-useref模块，该模块解析HTML中的构建块，替换它们并传递这些文件。

这里是示例设置：

<强>的index.html ：

<!doctype html>
<html ng-app="app">
<head>
    <!-- build:js app.js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="myscript.js"></script>
    <!-- endbuild -->
</head>
<body>
    Hello world!
</body>
</html>

<强> gulpfile.js ：

var gulp = require('gulp');
var useref = require('gulp-useref');

gulp.task('default', function () {
    return gulp.src('app/index.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

现在运行gulp将导致在dist文件夹中包含两个文件：

index.html - 将build块替换为唯一的脚本标记<script src="app.js"></script>
app.js - 原始build文件的index.html块中列出的文件的串联

同样可以使用css文件。

这样，您的目标文件夹中就没有额外的文件，只是您在应用中使用的文件。

Answer 2

var concat = require("gulp-concat");

gulp.task('minify-js', function() {
gulp.src(['./app/**/*.js', '!./app/bower_components/**'])
.pipe(uglify({
        output: {
            beautify: false
        },
        outSourceMap: true,
        properties    : true,
        mangle:false
    }))
    .pipe(concat('bundle.js'))       
.pipe(gulp.dest('./dist/'))
});

这将连接一个bundle.js文件中的所有文件。

Gulp - 如何仅收集使用过的文件并将它们转换为`dest`中的单个文件

2 个答案: