クイックメモリの使用量をガルプします

この記事では、gulp の使い方と、gulp の使い方をすぐに覚える方法について説明します。gulp の使い方をあまり知らない方は、この記事も合わせてご覧ください。

作成手順:
1. インストール方法
2. 使い方

1. インストール方法
まず、コンピュータにnodejsをインストールする必要があります。 gulpを実行する必要があります。これはnodejs環境に基づいています。
インストールが完了したら、直接 npm install gulp -g を実行します (このコードがわからない場合は、Baidu に問い合わせてください。) インストールが完了したら、cmd ウィンドウで gulp 関数を直接呼び出すことができます。
2. 使い方
gulpの役割は何ですか？
appというプロジェクトを構築します。このプロジェクトには、cssフォルダー、jsフォルダー、画像フォルダー、htmlファイルが含まれています。通常、フォルダー内のファイルにはスペースやコメントが含まれており、転送するファイルのサイズが比較的大きいため、転送効率が低くなります。したがって、これらのファイルを圧縮したい場合は、gulp を使用します。
ガルプの使い方?
1. gulpfile.js ファイルをプロジェクト ディレクトリに直接作成し、cmd ウィンドウで対応するコマンドを実行して gulpfile.js を実行します。
たとえば、js ファイルをコンパイルしたいとします。アプリのファイル構造は次のとおりです:

次に、gulpfile ファイルの作成を開始します:

var gulp = require('gulp');//引入gulp模块
var uglify = require('gulp-uglify');
//引入gulp-uglify模块，用来压缩js文件。如果要压缩css文件就要引入gulp-minify-css模块。这些模块都要通过npm包管理器来安装。安装之后app文件中会自动出现一个叫node_modules的文件夹。如果你在全局安装了gulp，这里建议你进入到该项目文件夹再安装一次，避免后面gulp更新之后影响文件运行。

//执行压缩任务。创建一个名为script的任务(随意取名)，在cmd中输入gulp script会执行该任务，即运行后面的function功能
gulp.task('script',function(){
    gulp.src('js/*.js')//获取文件地址
         .pipe(uglify())//执行编压缩功能。如果是压缩css则把来自于gulp-uglify的uglify()方法转换成gulp- minify-css模块中的minifyCSS功能。
         .pipe(gulp.dest('dist/js'));//输出文件位置，在dist文件夹下的js文件夹内。如果项目中不存在dist的文件，会自动创建。
})

//编译完成，如果我们修改原js文件，要使压缩文件也自动改变怎么办。这个时候我们就要对原js文件进行监听，如果发现有改动则重新编译。代码如下：
//执行监听任务
gulp.task('auto',function(){// 创建一个监听任务。
    //监听文件修改，当文件被修改则执行script人物
    gulp.watch('js/*.js',['script']);//第一个参数表示监听的文件，第一个参数表示重新执行script人物。
})
//所有的任务要在cmd中输入gulp+任务名后才能执行。这样不太方便，可不可以在定义任务，它的作用就是执行执行之后可以执行所有的人物。
//有，如下：
//gulp.task('default')定义默认任务
//在命令行使用gulp启动script任务和auto人物
gulp.task('default',['script','auto']);
//这样我们直接在cmd中输入gulp就会执行script和auto这两个任务。

次の gulp 関数を要約します:

• gulp.task( 'タスク名', function (){}) タスクを定義します

• gulp.src()//現在のファイルアドレスを検索します

• gulp.desk()//出力ファイル

• gulp.pipe ()//理解できる パイプラインの場合、実行キューに操作を追加します。

3. 他のファイルを圧縮またはコンパイルします (js を比較するだけです)
1. CSS ファイルをコンパイルします
ブロック名: gulp-minify-css
ファイルを圧縮する : minifyCSS

2 、画像を圧縮します ブロック名: gulp-imagemin
ファイル圧縮関数: imagemin({progressive})

3. コンパイルを少なくします ブロック名: gulp-less
コンパイル方法:less();

four 、 gulp を使用してプロジェクトをビルドします

1. cmd で package.json

構成ファイル を作成します。これには、依存パッケージの情報が含まれます。 対応するモジュールをインストールすると、package.json にモジュール名が追加されます。
2.
ディレクトリ構造を設計する ファイルを 2 つのカテゴリに分けます。dist/ ディレクトリは圧縮コード、src/ ディレクトリはソース コード ファイルです。

gulp の出力に時間と色を持たせる方法 gulp-util も同じ効果がありますが、色の効果がより豊富です。

モジュール gulp-util の紹介

var  gutil = require('gulp-util');
gulp.task('default',function(){
    gutil.log('message')
    gutil.log(gutil.colors.red('error'))
    gutil.log(gutil.colors.green('message')+'some')
})

ここで、cmd ウィンドウで gulp 操作を実行するには、gulp 操作がプロジェクト フォルダー、つまり、node_modules フォルダーが配置されているインターフェイスに入らなければならないことが強調されています。
4. jsファイルの設定方法
上記の書き方には問題があり、一つのjsファイルを変更すると全てのjsファイルが再コンパイルされてしまいます。
変更したファイルのみをコンパイルしたい場合はどうすればよいですか?
gulp-watch-pathを使用する

//引入模块:var watchPath = require('gulp-watch-path');//设置一个监听js文件的人物watchjsgulp.task('watchjs',function(){
     gulp.watch('src/js/**/*.js',function(event){
     var paths = watchPath('event','src/','dist/')//监听所有的js文件，有一个文件发生改变，则返回一个对象，该对象包含被修改js文件的相关属性。
         /*
           paths对象的结构如下:{srcPath:'src/js/log.js',
           distPath:'dist/js/log.js',
           distDir:'dist/js/',
           srcFilename:'log.js',
           distFilename:'log.js'}
         */ 
      gulp.src(paths.srcPath)
          .pipe( uglify())
          .pipe(gulp.dest(paths.distDir))


})


})

ソースコードの編集時にフォーマットエラーが発生した場合、このエラーを出力するにはどうすればよいですか?stream-combiner2を使用する

var handleError = function (err) {
var colors = gutil.colors;
console.log('\n')
gutil.log(colors.red('Error!'))
gutil.log('fileName: ' + colors.red(err.fileName))
gutil.log('lineNumber: ' + colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
}
var combiner = require('stream-combiner2')
gulp.task('watchjs', function () {
gulp.watch('src/js/**/*.js', function (event) {
var paths = watchPath(event, 'src/', 'dist/')

var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
])
combined.on('error', handleError)
})
})

圧縮コードに改行や空白文字が含まれていないため、エラーが発生します。デバッグは難しいですが、幸いなことにソースマップを使用してデバッグを支援できます

var sourcemaps = require('gulp-sourcemaps')
// ...
var combined = combiner.obj([
gulp.src(paths.srcPath),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)
])
// ...

この時点で、対応する .map ファイルも dist/js/ に生成されるため、Chrome コンソールを使用してデバッグできますcode

gulp-autoprefixer – CSS ファイルを解析し、ブラウザーのプレフィックスを CSS ルールに追加します。これらのプレフィックスはコンパイル中に追加されます

gulp.task('watchcss', function () {
gulp.watch('src/css/**/*.css', function (event) {
var paths = watchPath(event, 'src/', 'dist/')//用于检测被修改的文件，返回一个对像，该对象包含一些关于被修改文件的属性。
gulp.src(paths.srcPath)//获取文件地址
.pipe(sourcemaps.init())//初始化对象，便于后面生成该文件的.map文件
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))//添加前缀
.pipe(minifycss())//执行压缩功能
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))//输出文件
})
})

関連する推奨事項:

gulp を始めるために知っておくべきこと

以上がクイックメモリの使用量をガルプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。