javascript - Gulp 任务合并 Javascript 和框架

Question

我对 WebDev 和 Gulp 完全陌生。我目前正在创建一个自己的项目进行实验。我想使用 Angular 1 和 Bootstrap。到目前为止我所做的是通过 NPM 安装 Bootstrap。创建一个 main.less 文件，在其中导入 Bootstrap.less 文件和我自己的所有 less 文件。然后，这个 main.less 文件将被编译成一个公共(public) CSS 文件，该文件通过 gulp-inject 注入(inject)到 index.html 中。

现在进入 Javascript 部分。我还想要一个 Javascript 文件被注入(inject)到 index.html 中。

首先这是建议的，还是我应该自动注入(inject)我将创建的所有 Javascript 文件？

我该如何处理我的框架？我知道我可以在 Javascript 文件中执行 require('angular') 等操作。但我该把它放在哪里呢？

Answer 1

您想要同时学习很多东西。我建议先先放下一部分，然后再继续下一部分。如果您刚刚开始学习 Web 开发，则尤其如此。

我建议首先学习并确定您的构建环境，因为它将为您提供有值(value)的工具，从而节省您大量时间。

如果您尚未安装 gulp，则需要通过 npm 安装它，如下所示:

npm install gulp --save-dev

注意:如果您在安装 npm 软件包时遇到错误，则可能需要使用 sudo npm install gulp --save-dev，具体取决于您的操作系统及其环境。

--save-dev 部分将在 package.json 文件中放置对开发依赖项的引用。这将允许在其系统上设置您的项目的任何人进行 npm install，并且他们应该获得运行安装在您的系统上的项目所需的所有依赖项。

下面是您想要通过我之前描述的 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 文件。只需将其放在项目根目录中，然后在命令行中输入 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/内的less文件、app/src/assets/js内的javascript文件所做的任何更改都将自动更新并显示在浏览器中。 less 文件夹中的所有 less 文件将被编译为一个名为 main.css 的文件，js 文件夹中的所有 js 文件将被编译为一个名为 bundler.js 的 javascript 文件。

您想要加载的任何 less 文件，例如 Bootstrap 中的 less 文件，您可以通过导入加载到 main.less 文件中。下面的示例来自 main.less 文件。

ma​​in.less

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

您需要将您自己的 css 的所有文件放置在 less 文件夹内的partials 文件夹中。我试图使结构尽可能简单，所以请四处看看，如果您有疑问，请告诉我。

现在就这样，进行测试，看看它是如何工作的，如果您认为它适合您，那么我们可以致力于添加 Angular 集成...