Question

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

现在来到Javascript-Part。我还希望有一个Javascript-File被注入index.html。

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

我如何解决我的框架问题？我知道我可以在Javascript文件中执行require('angular')。但是我把它放在哪里？

Answer 1

有很多事情你想要一次学习。我建议在继续下一部分之前先让一部分下来。如果您刚刚开始学习Web开发，则尤其如此。

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

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

npm install gulp --save-dev

注意：如果根据您的操作系统及其环境收到安装npm软件包的错误，您可能必须使用sudo npm install gulp --save-dev。

--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文件。只需将它放在项目根目录中，然后在命令行中键入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文件夹中完成所有开发。创建这些文件夹后，在src文件夹中放置一个名为index.html的文件，其中包含以下内容。

<强>的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 /中的文件更少，app / src / assets / js中的javascript文件将自动更新并显示在浏览器中。 less文件夹中的所有较少文件将被编译为一个名为main.css的文件，js文件夹中的所有js文件将被编译为一个名为bundler.js的javascript文件。

你想要加载的文件少，比如来自bootstrap的文件少，例如你可以通过导入加载到main.less文件中。以下示例来自main.less文件。

<强> main.less

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

您需要将自己的CSS放在less文件夹内的partials文件夹中的所有文件。我试图让结构变得简单，所以如果你有问题，请浏览一下并告诉我。

现在就把它用于试驾以了解它是如何工作的，如果你认为它对你有用，那么我们可以继续添加Angular集成......

Gulp任务合并Javascript和框架

1 个答案: