Задача Gulp объединить JavaScript и фреймворки

Есть много вещей, которые вы пытаетесь изучить сразу. Я бы предложил получить одну часть до перехода к следующей части. Это особенно верно, если вы только начинаете изучать веб-разработки.

Я бы посоветовал научиться, а затем пригвоздить свою среду сборки, поскольку она предоставит вам ценные инструменты, которые сэкономят вам много времени.

Если вы еще не установили глоток, вам нужно будет установить его через npm, как показано ниже:

npm install gulp --save-dev

Примечание. Возможно, вам придется использовать sudo npm install gulp --save-dev, если вы получаете ошибки при установке пакетов npm в зависимости от вашей операционной системы и ее среды.

Часть -save-dev поместит ссылку на ваши зависимости развития внутри вашего файла package.json. Это позволит всем, кто настраивает ваш проект в своей системе на установку npm, и они должны получить все зависимости, необходимые для запуска вашего проекта, установленного в вашей системе.

Ниже приведен список вещей, которые вы захотите установить через npm install package-name - метод save-dev, который я описал ранее.

npm install gulp --save-dev  (needed for to run gulp commands)

npm install gulp-less --save-dev (compiles your less files in to css)

npm install gulp-concat --save-dev (concats your js files into one file)

npm install gulp-uglifiy --save-dev (compresses, minifies your js file)

npm install gulp browser-sync --save-dev (loads your project using a http server and enables hot reloading of the page.)

ОБНОВЛЕНИЕ: в качестве альтернативы для установки вышеуказанных пакетов по одному вы можете использовать следующий файл package.json. Просто поместите его в свой проект root и введите npm install в своей командной строке (возможно, вам придется использовать sudo npm install в зависимости от вашей системы.

package.json

"name": "bootstrap-angular-less",
  "version": "1.0.0",
  "description": "Basic Angular 1 build package with support for bootstrap and less.",
  "main": "index.html",
  "dependencies": {
    "angular": "^1.5.8",
    "bootstrap": "^3.3.7",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-less": "^3.1.0",
    "gulp-uglify": "^1.5.4",
    "gulp-util": "^3.0.7",
    "path": "^0.12.7"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Larry J Lane",
  "license": "ISC"
}

После установки всех зависимостей создайте имя файла gulpfile.js и поместите его в корень вашего проекта. После создания файла добавьте в него следующий код.

**gulpfile.js**


//require all of the gulp modules
var gulp = require('gulp');
var browserSync = require('browser-sync');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var util = require('gulp-util');
var path = require('path');




var dirs = {
  src: './app/src',
  dest: './app/build'
};

var jsPaths = {

jsSrc: dirs.src + "/assets/js/*.js",
jsDest: dirs.dest + "/assets/js/"

};

var lessPaths = {
  src: dirs.src + "/assets/less/main.less",
  dest: dirs.dest + "/assets/styles/"
};

var templatePaths = {

  src: dirs.src + "/*.html",
  dest: dirs.dest + "/"

}



// Browsersync server that watches CSS, HTML, and JS
gulp.task('server', ['html','css','js'],function() {


    browserSync.init({

      server: {
      baseDir: dirs.dest,
      serveStaticOptions: {
          extensions: ['html']
      }
     }
    });


    gulp.watch(dirs.src + "/assets/less/**/*.less", ['css']);

    gulp.watch(dirs.src + "/assets/js/*.js", ['js']);

    gulp.watch(templatePaths.src, ['html']);

    browserSync.watch(templatePaths.dest + '*.html').on('change', browserSync.reload);

});

// CSS Preprocessing. Uses Less to pre-process and pipes stream to Browsersync.
gulp.task('css', function () {
  return gulp.src(lessPaths.src)
    .pipe(less())
    .pipe(concat('main.css'))
    .pipe(gulp.dest(lessPaths.dest))
    .pipe(browserSync.stream());
});

//HTML processing.
gulp.task('html', function() {

    return gulp.src(templatePaths.src)
        .pipe(gulp.dest(templatePaths.dest));
});


gulp.task('js', function() {

  return gulp.src([jsPaths.jsSrc])
    .pipe(concat('bundler.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsPaths.jsDest))
    .pipe(browserSync.stream());

});

//Default task that will run when type gulp in the command line.
gulp.task('default', ['server']);

Затем вам нужно будет создать несколько папок в корне вашего проекта. Создайте папку с именем app и поместите в нее две новые папки. Первый должен иметь имя build, а второй - src. Вы внесете всю свою разработку из папки src. После того, как вы создали эти папки, поместите файл с именем index.html в папку src со следующим содержимым.

index.html

<!DOCTYPE html>
<html>
<head>
<title>A basic gulp browser sync build template</title>
<link href="/assets/styles/main.css" type="text/css" rel ="stylesheet">
</head>
<body>


This is a basic gulp browser sync build template with support for less.

<script type="text/javascript" src="/assets/js/bundler.js"></script>
</body>
</html>

После того, как все это скомпоновано, из командной строки введите gulp, и он должен загрузить проект внутри вашего браузера. Любые изменения, внесенные в index.html, меньше файлов внутри файлов app/src/assets/styles/less/, javascript внутри app/src/assets/js будут автоматически обновляться и отображаться в браузере. Все меньше файлов внутри меньше папки будут скомпилированы в один файл с именем main.css, и все js файлы внутри папки js будут скомпилированы в один файл javascript с именем bundler.js.

Любые меньше файлов, которые вы хотите загрузить, например, меньше файлов из начальной загрузки, например, вы можете загрузить файл main.less через импорт. Пример ниже из файла main.less.

main.less

//import less files
@import 'partials/_globals.less';

Все файлы, которые вам понадобятся вашему css, нужно поместить в папку partials внутри папки меньшего размера. Я попытался сделать структуру максимально простой, поэтому взгляните вокруг и сообщите мне, есть ли у вас вопросы.

То есть на данный момент взять тест-драйв, чтобы увидеть, как он работает, и если вы думаете, что это сработает для вас, тогда мы сможем работать над добавлением угловой интеграции...