Gulp-Nutzung, schnelles Gedächtnis

In diesem Artikel geht es um die Verwendung von „gulp“ und darum, wie wir uns die Verwendung von „gulp“ schnell einprägen können. Für diejenigen unter Ihnen, die nicht viel über die Verwendung von „gulp“ wissen, können wir uns diesen Artikel gemeinsam ansehen!

Schreibschritte:
Wie man es installiert
Wie man es benutzt

1. So installieren Sie
Zuerst müssen Sie nodejs auf Ihrem Computer installieren, da die Funktionsweise von gulp auf der nodejs-Umgebung basiert.
Nachdem die Installation abgeschlossen ist, installieren Sie direkt npm gulp -g (Wenn Sie diesen Code nicht verstehen, fragen Sie bitte Baidu.) Nach Abschluss der Installation können Sie die gulp-Funktion direkt im cmd-Fenster aufrufen.
2. Wie benutzt man
Welche Rolle spielt der Schluck?
Wir erstellen ein Projekt namens App, das einen CSS-Ordner, einen JS-Ordner, einen Bildordner und eine HTML-Datei enthält. Normalerweise enthalten die Dateien im Ordner Leerzeichen und Kommentare. Diese Dateien sind relativ groß und die Übertragungseffizienz ist gering. Wenn wir diese Dateien also komprimieren möchten, verwenden wir gulp.
Wie verwende ich Schluck?
1. Erstellen Sie eine gulpfile.js-Datei direkt im Projektverzeichnis und führen Sie dann den entsprechenden Befehl im cmd-Fenster aus, um gulpfile.js auszuführen.
Zum Beispiel möchte ich eine JS-Datei kompilieren:

Als nächstes beginnen wir mit dem Schreiben der gulpfile-Datei:

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这两个任务。

Zusammenfassung wie folgt: Funktionen von gulp:

• gulp.task('task name', function(){}) definiert eine Aufgabe

• gulp.src( )//Finden Sie die aktuelle Dateiadresse

• gulp.desk()//Ausgabedatei

• gulp. pipe()//Verständlich: Fügen Sie für eine Pipeline Vorgänge zur Ausführungswarteschlange hinzu.

3. Andere Dateien komprimieren oder kompilieren (einfach mit js vergleichen)
1 >Blockname: gulp-minify-css
Datei komprimieren
Funktion:minifyCSS

2. Bilder komprimieren Blockname: gulp- imagemin
Dateifunktion komprimieren: imagemin({progressive})

3. Weniger kompilieren Blockname: gulp-less
Kompilierungsmethode: less();

4. Erstellen Sie ein Projekt mit gulp

1. Erstellen Sie package.json

Konfigurationsdatei in cmd, Es enthält Informationen zu Ihrem Abhängigkeitspaket. Installieren Sie das entsprechende Modul und der Modulname wird zu package.json hinzugefügt.
2. Entwerfen Sie die
Verzeichnisstruktur Teilen Sie die Dateien in zwei Kategorien ein: Das Verzeichnis dist/ ist der komprimierte Code und das Verzeichnis src/ ist die Quellcodedatei.

Wie man die Ausgabe von gulp mit Zeit und Farbe ausführt, hat den gleichen Effekt, aber sein Farbeffekt ist reicher.

Stellen Sie das Modul gulp-util vor

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')
})

Hier wird betont, dass die Gulp-Operation in den Projektordner gelangen muss, dh in die Schnittstelle, in der sich der Ordner node_modules befindet, um die Gulp-Operation im cmd-Fenster auszuführen.
4. So konfigurieren Sie JS-Dateien
Es gibt ein Problem mit der oben genannten Schreibmethode. Solange eine JS-Datei geändert wird, werden alle JS-Dateien neu kompiliert.
Was ist, wenn wir nur die geänderten Dateien kompilieren möchten?
Verwenden Sie 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))


})


})

Wenn beim Bearbeiten des Quellcodes ein Formatfehler auftritt, wie wird dieser Fehler ausgegeben?

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)
})
})

Danach Komprimierung Der Code enthält keine Zeilenumbrüche und Leerzeichen, was das Debuggen nach einem Fehler erschwert. Glücklicherweise können wir Sourcemap zum Debuggen verwenden

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

Zu diesem Zeitpunkt wird die entsprechende .map-Datei verwendet kann auch in dist/js/ generiert werden. Zum Debuggen von Code mit der Chrome-Konsole

gulp-autoprefixer – analysiert CSS-Dateien und fügt Browser-Präfixe zu CSS-Regeln hinzu. Diese Präfixe werden während der Kompilierung hinzugefügt

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))//输出文件
})
})

Verwandte Empfehlungen:

Was Sie wissen müssen, um es zu bekommen begann mit Schluck

Das obige ist der detaillierte Inhalt vonGulp-Nutzung, schnelles Gedächtnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!