Gulp utilise la mémoire rapide

Cet article parle de l'utilisation de gulp et de la façon dont nous pouvons mémoriser rapidement l'utilisation de gulp. Pour ceux d'entre vous qui ne savent pas grand-chose sur l'utilisation de gulp, nous pouvons jeter un œil à cet article ensemble !

Étapes d'écriture :
1. Comment installer
2. 🎜>

1. Comment installer Tout d'abord, vous devez installer nodejs sur votre ordinateur, car le fonctionnement de gulp est basé sur l'environnement nodejs. Une fois l'installation terminée, npm installez directement gulp -g (Si vous ne comprenez pas ce code, veuillez demander à Baidu.) Une fois l'installation terminée, vous pouvez appeler directement la fonction gulp dans la fenêtre cmd.


2. Comment utiliser
Quel est le rôle de gulp ? Nous construisons un projet appelé app, qui contient un dossier css, un dossier js, un dossier image et un fichier html. Habituellement, les fichiers du dossier comportent des espaces et des commentaires. Ces fichiers sont relativement volumineux à transférer et l'efficacité du transfert est faible. Donc si nous voulons compresser ces fichiers, nous utiliserons gulp.
Comment utiliser gulp ?
1. Créez un fichier gulpfile.js directement dans le répertoire du projet, puis exécutez la commande correspondante dans la fenêtre cmd pour exécuter gulpfile.js. Par exemple, je souhaite compiler un fichier js. La structure du fichier d'application est la suivante :

Ensuite, nous commençons à écrire le fichier gulpfile :

Résumé comme suit Fonctions de gulp :

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.task('task name', function(){}) définit une tâche
gulp.src( )//Trouver l'adresse actuelle du fichier
gulp.desk()//Fichier de sortie
gulp. pipe()//Understandable Pour un pipeline, ajoutez des opérations à la file d'attente d'exécution.

3. Compresser ou compiler d'autres fichiers (comparez simplement avec js) 1. >
Nom du bloc : gulp-minify-css Compresser le fichierFonction
:minifyCSS
2. Compresser les images

Nom du bloc : gulp- imagemin Fonction de compression de fichier : imagemin({progressive})

3. Compiler moins

Nom du bloc : gulp-less Méthode de compilation : less();

4. Créez un projet en utilisant gulp

1. Créez package.json
fichier de configuration

dans cmd, Il contient les informations de votre package de dépendances.

Installez le module correspondant et le nom du module sera ajouté à package.json. 2. Concevoir la structure des répertoires

Divisez les fichiers en deux catégories : le répertoire dist/ est le code compressé et le répertoire src/ est le fichier de code source.
Comment faire en sorte que la sortie de gulp ait du temps et de la couleur. gulp-util a le même effet, mais son effet de couleur est plus riche.

Présenter le module 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')
})

Il est souligné ici que l'opération gulp doit entrer dans le dossier du projet, c'est-à-dire l'interface où se trouve le dossier node_modules, afin d'effectuer l'opération gulp dans la fenêtre cmd.

4. Comment configurer les fichiers js Il y a un problème avec la méthode d'écriture ci-dessus Tant qu'un fichier js est modifié, tous les fichiers js seront recompilés.
Et si on veut uniquement compiler les fichiers modifiés ?
Utilisez gulp-watch-path


Si nous avons une erreur de format lors de l'édition du code source, comment afficher cette erreur

//引入模块: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))


})


})

Après ? compression Le code n'a pas de sauts de ligne ni de caractères d'espacement, ce qui rend le débogage difficile après qu'une erreur se produit. Heureusement, nous pouvons utiliser sourcemap pour aider au débogage

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

À ce stade, le fichier .map correspondant sera. également être généré dans dist/js/. Pour déboguer le code à l'aide de la console Chrome

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

gulp-autoprefixer – analyse les fichiers CSS et ajoute les préfixes du navigateur aux règles CSS. Ces préfixes seront ajoutés lors de la compilation

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

Recommandations associées :

Ce que vous devez savoir pour obtenir a commencé avec gulp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!