0

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

现在到 Javascript 部分。我还想要一个注入 index.html 的 Javascript 文件。

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

我如何处理我的框架？我知道我可以require('angular')在一个 Javascript 文件中做例如。但是我把这个放在哪里？

4

1 回答 1

1

有很多东西是你试图一次学习的。我建议先放下一个部分，然后再继续下一个部分。如果您刚刚开始学习 Web 开发，则尤其如此。

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

如果您尚未安装 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。

包.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 文件夹中进行所有开发。创建这些文件夹后，在 src 文件夹中放置一个名为 index.html 的文件，其中包含以下内容。

索引.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文件。

您想要加载的任何更少的文件，例如来自引导程序的更少文件，例如，您可以通过导入在 main.less 文件中加载。下面的示例来自 main.less 文件。

main.less

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

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

这就是现在将它用于试驾，看看它是如何工作的，如果你认为它对你有用，那么我们可以努力添加 Angular 集成......

于 2016-07-30T15:19:09.573 回答