Форум программистов, компьютерный форум, киберфорум
Node.js
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/47: Рейтинг темы: голосов - 47, средняя оценка - 4.57
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 611
1

Подключение bootstrap + jquery (gulp)

10.05.2017, 11:02. Показов 8404. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Собрал проект, все норм. Решил подключить bootstrap, подключил через npm install.
Добавил в gulpfile.js. Потом подключил в стилях @import "bootstrap". решил собрать. Мне выдало ошибку, что сначала необхдимо подключить библиотеку jQuery. Установил её через npm install, а вот дальше не пойму что делать надо, порылся в гугле нашел типо такого gulp.src(["node_modules/jquery/dist/jquery.min.js",path.src.js]). Но оно не помогает. Как правильно сделать?)
gulpfile.js
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
'use strict';
 
var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    bootstrap = require('bootstrap'),
    reload = browserSync.reload;
 
var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: {
        html: 'src/*.html',
        js: 'src/js/main.js',
        style: 'src/style/main.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};
 
var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Kovich_prefix"
};
 
gulp.task('webserver', function () {
    browserSync(config);
});
 
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});
 
gulp.task('html:build', function () {
    gulp.src(path.src.html) 
        .pipe(rigger())
        .pipe(gulp.dest(path.build.html))
        .pipe(reload({stream: true}));
});
 
gulp.task('js:build', function () {
    gulp.src(["node_modules/jquery/dist/jquery.min.js",path.src.js]) 
        .pipe(rigger()) 
        .pipe(sourcemaps.init()) 
        .pipe(uglify()) 
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest(path.build.js))
        .pipe(reload({stream: true}));
});
 
gulp.task('style:build', function () {
    gulp.src(path.src.style) 
        .pipe(sourcemaps.init())
        .pipe(sass({
            sourceMap: true,
            errLogToConsole: true
        }))
        .pipe(prefixer())
        .pipe(cssmin())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}));
});
 
gulp.task('image:build', function () {
    gulp.src(path.src.img) 
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img))
        .pipe(reload({stream: true}));
});
 
gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});
 
gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
]);
 
 
gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});
 
 
gulp.task('default', ['build', 'webserver', 'watch']);
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.05.2017, 11:02
Ответы с готовыми решениями:

Переход на Gulp v4 Перестал работать плагин сборщик спрайтов gulp.spritesmith
Перешел на новую версию Gulp (v4) и мой галп сборщик превратился в тыкву, Подскажите, как исправить...

Gulp rigger и gulp include file при сборке html файла ломают верстку
Добрый вечер. Осваиваю gulp. На данном этапе мне нужна только вставка повторяющегося кода....

Сверстаю бесплатно Html CSS Sass JS jQuery Gulp Webpack
Приветствую) Предлагаю бесплатную вёрстку по вашим макетам PSD. У меня нет потребности в макетах...

JQuery и Bootstrap
Есть менюшка написанная с использованием Bootstrap, этой менюшке от Bootstrap досталась анимация...

3
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 767
Записей в блоге: 5
10.05.2017, 16:46 2
Помочь не могу, но хочу сказать, что файл gulpfile.js хорошо написан. Добавлю в gist однозначно.
Проект на Github есть?
0
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 611
10.05.2017, 17:22  [ТС] 3
Цитата Сообщение от Resume Посмотреть сообщение
Проект на Github есть?
github
Там еще без установленных bootstrap и jquery(npm install)
Ну а подключил я пока что вот так. Не знаю правильно так делать или нет
0
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 767
Записей в блоге: 5
10.05.2017, 20:38 4
Есть идея у меня. Вот мой gulpfile:
https://github.com/AlexeyKorko... ulpfile.js

Попробуй вот так:
Javascript
1
2
3
gulp.src([
            'node_modules/jquery/dist/jquery.min.js'
        ])
У меня gulpfile так себе, но jquery и bootstrap собираются в gulp'ом.
0
10.05.2017, 20:38
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.05.2017, 20:38
Помогаю со студенческими работами здесь

JQuery and BootStrap
Доброго времени! Пытаюсь вставить кнопку и обработать её нажатие с помощью js функции formatter:...

JQuery: FancyBox vs Bootstrap
Удивлен, что не нагуглил ничего по этой проблеме в тырнете... А проблема следующая: есть офигенный...

Bootstrap и Jquery отличия
Объясните их отличия при например верстке страницы. Как я понял бутстрап это библиотека, с...

Использование Jquery и bootstrap
Всем привет! В данный момент я начал изучать программирование web. В данный момент есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru