bower in gulp concat and filter

manvfx commented 7 years ago

I want add bower files in build folder. How to concat css files , js files and fonts in build folder? I need example code. please help me

My Code:

`var gulp = require('gulp'), newer = require('gulp-newer'), concat = require('gulp-concat'), preprocess = require('gulp-preprocess'), htmlclean = require('gulp-htmlclean'), imagemin = require('gulp-imagemin'), imacss = require('gulp-imacss'), sass = require('gulp-sass'), pleeease = require('gulp-pleeease'), jshint = require('gulp-jshint'), deporder = require('gulp-deporder'), stripdebug = require('gulp-strip-debug'), uglify = require('gulp-uglify'), size = require('gulp-size'), del = require('del'), mainBowerFiles = require('main-bower-files'), bowerNormalizer = require('gulp-bower-normalize'), browsersync = require('browser-sync'), pkg = require('./package.json');

// file locations var devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() !== 'production'),

source = 'app/',
dest = 'build/',

html = {
    in: source + '*.html',
    watch: [source + '*.html', source + 'layout/**/*'],
    out: dest,
    context: {
        devBuild: devBuild,
        author: pkg.author,
        version: pkg.version
    }
},

images = {
    in: source + 'dist/images/*',
    out: dest + 'images'
},

imguri = {
    in: source + 'dist/images/inline/*',
    out: source + 'dist/sass/images/',
    filename: '_datauri.scss',
    namespace: 'images'
},

css = {
    in: source + 'dist/sass/main.scss',
    watch: [source + 'dist/sass/**/*', '!' + imguri.out + imguri.filename],
    out: dest + 'css/',
    sassOpts: {
        outputStyle: 'nested',
        imagePath: '../images',
        precision: 3,
        errLogToConsole: true
    },
    pleeeaseOpts: {
        autoprefixer: { browsers: ['last 2 versions', '> 2%'] },
        rem: ['16px'],
        pseudoElements: true,
        mqpacker: true,
        minifier: !devBuild
    },

},

fonts = {
    in: source + 'dist/fonts/**/*',
    out: dest + 'fonts/'
},

js = {
    in: source + 'dist/js/**/*',
    out: dest + 'js/',
    filename: 'app.min.js'
},

syncOpts = {
    server: {
        baseDir: dest,
        index: 'index.html'
    },
    open: true,
    notify: true
};

// show build type console.log(pkg.name + ' ' + pkg.version + ', ' + (devBuild ? 'development' : 'production') + ' build');

// clean the build folder gulp.task('clean', function() { del([ dest + '*' ]); });

// build HTML files gulp.task('html', function() { var page = gulp.src(html.in).pipe(preprocess({ context: html.context })); if (!devBuild) { page = page .pipe(size({ title: 'HTML in' })) .pipe(htmlclean()) .pipe(size({ title: 'HTML out' })); } return page.pipe(gulp.dest(html.out)); });

// manage images gulp.task('images', function() { return gulp.src(images.in) .pipe(newer(images.out)) .pipe(imagemin()) .pipe(gulp.dest(images.out)); });

// convert inline images to dataURIs in SCSS source gulp.task('imguri', function() { return gulp.src(imguri.in) .pipe(imagemin()) .pipe(imacss(imguri.filename, imguri.namespace)) .pipe(gulp.dest(imguri.out)); });

// copy fonts gulp.task('fonts', function() { return gulp.src(fonts.in) .pipe(newer(fonts.out)) .pipe(gulp.dest(fonts.out)); });

// compile Sass gulp.task('sass', ['imguri'], function() { return gulp.src(css.in) .pipe(sass(css.sassOpts)) .pipe(size({title: 'CSS in '})) //.pipe(pleeease(css.pleeeaseOpts)) .pipe(size({title: 'CSS out '})) .pipe(gulp.dest(css.out)) .pipe(browsersync.reload({ stream: true }));

});

gulp.task('js', function() { if (devBuild) { return gulp.src(js.in) .pipe(newer(js.out)) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(jshint.reporter('fail')) .pipe(concat(js.filename)) .pipe(gulp.dest(js.out)); } else { del([ dest + 'js/*' ]); return gulp.src(js.in) .pipe(deporder()) .pipe(concat(js.filename)) .pipe(size({ title: 'JS in '})) .pipe(stripdebug()) .pipe(uglify()) .pipe(size({ title: 'JS out '})) .pipe(gulp.dest(js.out)); } });

gulp.task('mainBowerFiles', function(){ return gulp.src(mainBowerFiles()) .pipe(bowerNormalizer({bowerJson: './bower.json'})) .pipe(gulp.dest(dest + 'lib')) });

// browser sync gulp.task('browsersync', function() { browsersync(syncOpts); });

// default task gulp.task('default', ['html', 'images', 'fonts', 'sass', 'js','mainBowerFiles','browsersync'], function() {

// html changes
gulp.watch(html.watch, ['html', browsersync.reload]);

// image changes
gulp.watch(images.in, ['images']);

// font changes
gulp.watch(fonts.in, ['fonts']);

// sass changes
gulp.watch([css.watch, imguri.in], ['sass']);

// javascript changes
gulp.watch(js.in, ['js', browsersync.reload]);

}); `

ck86 commented 7 years ago

var cssFiles = mainBowerFiles('**/*.css');

return gulp.src(cssFiles)
    .pipe(YourWhateverConcatPlugin())
    .pipe(gulp.dest(cssDest));

Same for JS files.

manvfx commented 7 years ago

Thanks a lot, please check my file and Correction my code. please help me

gulpfile.txt

manvfx commented 7 years ago

how to add multi file in argumant mainBowerFiles( js or css or fonts)

ck86 commented 7 years ago

I am not here to fix your code.

ck86 / main-bower-files

bower in gulp concat and filter #160