0

私は WebDev と Gulp がまったく初めてです。私は現在、実験用に独自のプロジェクトを作成しています。Angular 1 と Bootstrap を使いたいです。これまでに行ったことは、NPM 経由で Bootstrap をインストールすることです。main.less ファイルを作成します。ここに、Bootstrap.less ファイルと独自のすべての less ファイルをインポートします。この main.less ファイルは 1 つの公開 CSS ファイルにコンパイルされ、gulp-inject で index.html に挿入されます。

次に、Javascript の部分に進みます。また、index.html に挿入される 1 つの Javascript ファイルが必要です。

まず第一に、これをお勧めしますか、それとも、作成するすべての Javascript ファイルを自動的に挿入する必要がありますか?

また、フレームワークに対処するにはどうすればよいですか? require('angular')たとえば、Javascript-Fileでできることはわかっています。しかし、これをどこに置くのですか？

4

1 に答える 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.)

更新:上記のパッケージを 1 つずつインストールする代わりに、次の 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 という名前のフォルダーを作成し、その中に 2 つの新しいフォルダーを配置します。最初のものは build 、2 つ目は 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 と入力すると、ブラウザ内にプロジェクトが読み込まれます。app/src/assets/styles/less/ 内の index.html、less ファイル、app/src/assets/js 内の javascript ファイルに加えられた変更は、自動的に更新され、ブラウザに表示されます。less フォルダー内のすべての less ファイルは main.css という名前の 1 つのファイルにコンパイルされ、js フォルダー内のすべての js ファイルは bundler.js という名前の 1 つの javascript ファイルにコンパイルされます。

たとえば、ブートストラップからのより少ないファイルのように、読み込みたいファイルが少ない場合は、インポートを介して main.less ファイル内に読み込むことができます。main.less ファイルからの以下の例。

メインレス

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

less フォルダー内の partials フォルダーに配置する必要がある独自の css のすべてのファイル。構造をできるだけ簡単にしようとしましたので、周りを見て、質問があればお知らせください。

テストドライブで動作を確認してください。動作すると思われる場合は、Angular 統合の追加に取り組むことができます...

于 2016-07-30T15:19:09.573 に答える