gulp を使用して完全なプロジェクト プロセスを作成する方法

この記事では主に gulp を作成するプロジェクト全体のプロセスを簡単に紹介します。

gulp は、フロントエンド開発中にプロジェクトを自動的に構築するためのツールです。同じ機能は grunt です。このビルド ツールはプラグインに依存して、ファイルの変更を自動的に監視し、構文チェック、マージ、名前変更、圧縮、書式設定、ブラウザーの自動更新、js/sass/less/html/image/css などのファイルのデプロイメントなどの機能を実行します。 /コーヒー。

すべての環境はノードのインストールに基づいて実行されます。 node -v ノードのインストール状況を確認します。 npm -v npm のインストール状況を確認します

gulp 自動構築の共通パラメータ

2. dest はファイルを生成します

3. . test タスクを指定します

5. ストリーミング方式で gulp を処理します

gulp は次のようなディレクトリ構造を作成します

bower_components このファイルの下にインストールされます。バウアーを通って待ちます。

build : プロジェクト統合ディレクトリ。通常、すべてのコードは圧縮せずにここに統合されます。

dist: プロジェクトのリリース ディレクトリ。これもすべてのファイルを圧縮した後です。

src: プロジェクトのソース ファイル ディレクトリ。すべてのソース ファイルがここに配置されます。

テスト: これは自動テストを作成するためのものです

1. ターミナルでプロジェクトのルート ディレクトリに移動し、bower をインストールします。

bower init

Bower を初期化し、bower.json ファイルを生成し、必要なプラグインをインストールします。 angular などの party ファイルを実行して実行します

bower install - - save angular

bower の詳しい使い方を確認してください。

2. gulp をプロジェクトのルート ディレクトリにインストールして表示します。

gulpをグローバルにインストールします

npm install --global gulp

次に、設定ファイルを作成します

npm init 初期化してpackage.jsonファイルを作成します

npm install --save-dev gulp ノードの設定環境を設定ファイルにロードします。

次に、必要なプラグインをインストールします

npm install xxx —save-dev は、ファイルを構成ファイルに自動的に書き込みます。

これらはサイト全体を作成するためによく使用されます。複数のプラグインがある場合は、スペースの形式でプラグインを区切ることができます

npm install gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open  -—save-dev

次に、gulpfile.js 設定ファイルの記述があります。詳細は以下の通りです

//引入gulp
var gulp = require('gulp');
//这样的话 其他的模块可以直接使用 $ 符号来引入
var $ = require('gulp-load-plugins')();
var open = require('open');

//定义目录路径
var app = {
 //源代码，文件目录
 srcPath: 'src/',
 //文件整合之后的目录
 devPath: 'build/',
 //项目，发布目录上产部署
 prdPath: 'dist/'
};

//通过bower安装的插件，需要拷贝到 devPath prdPath中
gulp.task('lib',function(){
 // /**/* 读取这个文件夹下边的所有的文件或者文件夹
 gulp.src('bower_components/**/*')
 //读取完整后进行操作 西安拷贝到整合目录 并重命名，在拷贝到生产目录并重命名
 .pipe(gulp.dest(app.devPath + 'vendor'))
 .pipe(gulp.dest(app.prdPath + 'vendor'))
 .pipe($.connect.reload()); //文件更改后自动变异 并执行启动服务重新打开浏览器
});
//将 html 拷贝到 devPath prdPath中
gulp.task('html',function(){
 gulp.src(app.srcPath + '**/*.html')
 .pipe(gulp.dest(app.devPath))
 .pipe(gulp.dest(app.prdPath))
 .pipe($.connect.reload());
});
//将 模拟的json 文件 拷贝到 devPath prdPath中
gulp.task('json',function(){
 gulp.src(app.srcPath + 'data/**/*.json')
 .pipe(gulp.dest(app.devPath + 'data'))
 .pipe(gulp.dest(app.prdPath + 'data'))
 .pipe($.connect.reload());
});

//将 index.less 文件 拷贝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less',function(){
 gulp.src(app.srcPath + 'style/index.less')
 .pipe($.less())
 .pipe(gulp.dest(app.devPath + 'css'))
 .pipe($.cssmin())
 .pipe(gulp.dest(app.prdPath + 'css'))
 .pipe($.connect.reload());
});
// 拷贝 js 文件 将所有的源文件中的js 文件整合成index.js 然后拷贝过去
gulp.task('script',function(){
 gulp.src(app.srcPath + 'script/**/*.js')
 .pipe($.concat('index.js'))
 .pipe(gulp.dest(app.devPath + 'js'))
 .pipe($.uglify())
 .pipe(gulp.dest(app.prdPath + 'js'))
 .pipe($.connect.reload());
});

//拷贝 压缩 图片 最后放到发布目录下
gulp.task('image',function(){
 gulp.src(app.srcPath + 'image/**/*')
 //江源图片放到整合目录下，在压缩放到生产目录下
 .pipe(gulp.dest(app.devPath + 'image'))
 .pipe($.imagemin())
 .pipe(gulp.dest(app.prdPath + 'image'))
 .pipe($.connect.reload());
});

//总的方法
gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);

//清除旧文件，每次更新的时候
gulp.task('clean',function(){
 gulp.src([app.devPath,app.prdPath])
 .pipe($.clean());
})

//编写服务
gulp.task('serve',['build'], function() {
 $.connect.server({
  //服务起来的入口
  root: [app.devPath],
  //文件更改后自动刷新页面
  livereload: true,
  //端口号
  port: 1234
 });
 // 在 命令工具中执行 gulp serve 就相当于是启动了服务
 //自动打开浏览器
 open('http://localhost:1234');
 //我们希望更改了文件，就自动编译，并且打包等然后打开浏览器
 gulp.watch('bower_components/**/*' , ['lib']);
 //监听 script 下边的 js 文件，并执行 script 方法
 gulp.watch(app.srcPath + 'script/**/*.js', ['script']);
 gulp.watch(app.srcPath + '**/*.html', ['html']);
 gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
 gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
 gulp.watch(app.srcPath + 'image/**/*', ['image']);
 //这样文件变更了就会自动构建
});
//默认执行的任务，直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。
gulp.task('default', ['serve']);

gulpを使ってプロジェクトを作成するプロセスは完了です

以上が皆さんの参考になれば幸いです。

関連記事:

Bootstrapモーダルボックス送信バグの解決策

webpackで実行されるentry関数の詳細な解釈

Vueでエントリ/離脱アニメーションを実装する方法

をノード内で詳しく紹介。 jsのルーティングとミドルウェアへ

以上がgulp を使用して完全なプロジェクト プロセスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。