Qu'est-ce que l'autogestion JavaScript-js tutoriel-php.cn

L'autogestion JavaScript fait référence à l'outil de gestion automatique des tâches Grunt. Grunt peut nous aider à gérer et à exécuter automatiquement diverses tâches ; Grunt est un exécuteur de tâches automatique qui exécutera automatiquement une série de tâches dans un ordre prédéfini. peut rationaliser le flux de travail et réduire le fardeau du travail répétitif.

Qu'est-ce que l'autogestion JavaScript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Qu'est-ce que l'autogestion JavaScript, Grunt : outil de gestion automatique des tâches

安装命令脚本文件Gruntfile.jsGruntfile.js实例：grunt-contrib-cssmin模块常用模块设置grunt-contrib-jshintgrunt-contrib-concatgrunt-contrib-uglifygrunt-contrib-copygrunt-contrib-watch其他模块参考链接

Copier après la connexion

Dans le processus de développement de Javascript, nous rencontrons souvent des tâches répétitives, telles que la fusion de fichiers, la compression de code et la vérification Erreurs de syntaxe, conversion du code Sass en code CSS, etc. Habituellement, nous devons utiliser différents outils pour effectuer différentes tâches, ce qui est à la fois répétitif et prend beaucoup de temps. Grunt est un outil inventé pour résoudre ce problème, qui peut nous aider à gérer et exécuter automatiquement diverses tâches.

En termes simples, Grunt est un exécuteur de tâches automatique qui exécute automatiquement une série de tâches dans un ordre prédéfini. Cela rationalise le flux de travail et réduit le fardeau des tâches répétitives.

Installation

Grunt est basé sur Node.js Avant l'installation, vous devez d'abord installer Node.js, puis exécuter la commande suivante.

sudo npm install grunt-cli -g

Copier après la connexion

grunt-cli indique que l'interface de ligne de commande grunt est installée et le paramètre g indique une installation globale.

Grunt utilise une structure de modules. En plus d'installer l'interface de ligne de commande, vous devez également installer les modules correspondants si nécessaire. Ces modules doivent être installés localement, car différents projets peuvent nécessiter différentes versions du même module.

Tout d'abord, créez un fichier texte package.json dans le répertoire racine du projet pour spécifier les modules requis par le projet en cours. Voici un exemple.

{"name": "my-project-name","version": "0.1.0","author": "Your Name","devDependencies": {"grunt": "0.x.x","grunt-contrib-jshint": "*","grunt-contrib-concat": "~0.1.1","grunt-contrib-uglify": "~0.1.0","grunt-contrib-watch": "~0.1.4"}}

Copier après la connexion

Dans le fichier package.json ci-dessus, en plus d'indiquer le nom et la version du projet, le module grunt et la version dont dépend le projet sont également spécifiés dans l'attribut devDependencies : le module principal grunt est le dernière version 0.x.x , le plug-in jshint est la dernière version, le plug-in concat n'est pas inférieur à la version 0.1.1, le plug-in uglify n'est pas inférieur à la version 0.1.0 et le plug-in watch n'est pas inférieur à la version 0.1.4.

Ensuite, exécutez la commande suivante dans le répertoire racine du projet, et ces plug-ins seront automatiquement installés dans le sous-répertoire node_modules.

npm install

Copier après la connexion

La méthode ci-dessus est destinée à la situation où package.json existe déjà. Si vous souhaitez générer automatiquement le fichier package.json, vous pouvez utiliser la commande npm init et suivre les invites à l'écran pour répondre au nom et à la version du module requis.

npm init

Copier après la connexion

Si le fichier package.json existant n'inclut pas le module Grunt, vous pouvez ajouter le paramètre --save-dev lors de l'installation directe du module Grunt, et le module sera automatiquement ajouté au package.json déposer.

npm install--save-dev

Copier après la connexion

Par exemple, correspondant au module spécifié dans le fichier package.json ci-dessus, vous devez exécuter la commande npm suivante.

npm install grunt --save-devnpm install grunt-contrib-jshint --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-contrib-watch --save-dev命令脚本文件Gruntfile.js

Copier après la connexion

Une fois le module installé, l'étape suivante consiste à créer un nouveau fichier de script Gruntfile.js dans le répertoire racine du projet. Il s'agit d'un fichier de configuration pour Grunt, tout comme package.json est un fichier de configuration pour NPM. Gruntfile.js est la manière dont un module Node.js général est écrit.

module.exports = function(grunt) {// 配置Grunt各种模块的参数grunt.initConfig({jshint: { /* jshint的参数 */ },concat: { /* concat的参数 */ },uglify: { /* uglify的参数 */ },watch:{ /* watch的参数 */ }});// 从node_modules目录加载模块文件grunt.loadNpmTasks(&#39;grunt-contrib-jshint&#39;);grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;);grunt.loadNpmTasks(&#39;grunt-contrib-uglify&#39;);grunt.loadNpmTasks(&#39;grunt-contrib-watch&#39;);// 每行registerTask定义一个任务grunt.registerTask(&#39;default&#39;, [&#39;jshint&#39;, &#39;concat&#39;, &#39;uglify&#39;]);grunt.registerTask(&#39;check&#39;, [&#39;jshint&#39;]);};

Copier après la connexion

Le code ci-dessus utilise trois méthodes de code grunt :

grunt.initConfig : définit les paramètres des différents modules, et chaque élément membre correspond à un module du même nom. grunt.loadNpmTasks : chargez les modules nécessaires pour terminer la tâche. grunt.registerTask : définissez des tâches spécifiques. Le premier paramètre est le nom de la tâche et le deuxième paramètre est un tableau indiquant les modules que la tâche doit utiliser en séquence. Le nom de la tâche par défaut indique le module à appeler (jshint, concat et uglify dans cet exemple) si la commande grunt est entrée directement sans aucun paramètre ; la tâche de vérification dans cet exemple indique l'utilisation du plug-in jshint pour effectuer une vérification de syntaxe sur le module. code.

Le code ci-dessus charge un total de quatre modules : jshint (vérification des erreurs de syntaxe), concat (fusion de fichiers), uglify (compression du code) et watch (exécution automatique). Ensuite, il existe deux manières de l'utiliser.

[Apprentissage recommandé : Tutoriel avancé javascript]

(1) Exécution en ligne de commande d'un module, tel que

grunt jshint

Copier après la connexion

Le code ci-dessus signifie exécuter le module jshint.

(2) La ligne de commande effectue une certaine tâche. Par exemple,

grunt check

Copier après la connexion

Le code ci-dessus indique l'exécution de la tâche de vérification. Si l'opération réussit, "Terminé, sans erreur" s'affichera.

Si aucun nom de tâche n'est donné, il suffit de taper grunt pour exécuter la tâche par défaut.

Exemple Gruntfile.js : module grunt-contrib-cssmin

Ce qui suit montre comment écrire un fichier Gruntfile.js via le module cssmin. Le module cssmin est utilisé pour minimiser les fichiers CSS.

Tout d’abord, installez le module dans le répertoire racine de votre projet.

npm install grunt-contrib-cssmin --save-dev

Copier après la connexion

Ensuite, créez un nouveau fichier Gruntfile.js.

module.exports = function(grunt) {grunt.initConfig({cssmin: {minify: {expand: true,cwd: &#39;css/&#39;,src: [&#39;*.css&#39;, &#39;!*.min.css&#39;],dest: &#39;css/&#39;,ext: &#39;.min.css&#39;},combine: {files: {&#39;css/out.min.css&#39;: [&#39;css/part1.min.css&#39;, &#39;css/part2.min.css&#39;]}}}});grunt.loadNpmTasks(&#39;grunt-contrib-cssmin&#39;);grunt.registerTask(&#39;default&#39;, [&#39;cssmin:minify&#39;,&#39;cssmin:combine&#39;]);};

Copier après la connexion

Les trois méthodes du code ci-dessus seront expliquées en détail ci-dessous. Examinons-les une par une.

(1) la méthode grunt.loadNpmTasks

grunt.loadNpmTasks charge les fichiers du module.

grunt.loadNpmTasks(&#39;grunt-contrib-cssmin&#39;);

Copier après la connexion

Vous devez utiliser plusieurs modules. Ici, vous devez écrire quelques instructions grunt.loadNpmTasks pour charger chaque module un par un.

如果加载模块很多，这部分会非常冗长。而且，还存在一个问题，就是凡是在这里加载的模块，也同时出现在package.json文件中。如果使用npm命令卸载模块以后，模块会自动从package.json文件中消失，但是必须手动从Gruntfile.js文件中清除，这样很不方便，一旦忘记，还会出现运行错误。这里有一个解决办法，就是安装load-grunt-tasks模块，然后在Gruntfile.js文件中，用下面的语句替代所有的grunt.loadNpmTasks语句。

require(&#39;load-grunt-tasks&#39;)(grunt);

Copier après la connexion

这条语句的作用是自动分析package.json文件，自动加载所找到的grunt模块。

（2）grunt.initConfig

grunt.initConfig方法用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。由于我们要配置的是cssmin模块，所以里面有一个cssmin成员（属性）。

cssmin（属性）指向一个对象，该对象又包含多个成员。除了一些系统设定的成员（比如options），其他自定义的成员称为目标（target）。一个模块可以有多个目标（target），上面代码里面，cssmin模块共有两个目标，一个是“minify”，用于压缩css文件；另一个是“combine”，用于将多个css文件合并一个文件。

每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。cwd：需要处理的文件（input）所在的目录。src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。dest：表示处理后的文件名或所在目录。ext：表示处理后的文件后缀名。

除了上面这些参数，还有一些参数也是grunt所有模块通用的。

filter：一个返回布尔值的函数，用于过滤文件名。只有返回值为true的文件，才会被grunt处理。dot：是否匹配以点号（.）开头的系统文件。makeBase：如果设置为true，就只匹配文件路径的最后一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123。

关于通配符，含义如下：

*：匹配任意数量的字符，不包括/。?：匹配单个字符，不包括/。**：匹配任意数量的字符，包括/。{}：允许使用逗号分隔的列表，表示“or”（或）关系。!：用于模式的开头，表示只返回不匹配的情况。

比如，foo/.js匹配foo目录下面的文件名以.js结尾的文件，foo/**/.js匹配foo目录和它的所有子目录下面的文件名以.js结尾的文件，!*.css表示匹配所有后缀名不为“.css”的文件。

使用通配符设置src属性的更多例子：

{src: &#39;foo/th*.js&#39;}grunt-contrib-uglify{src: &#39;foo/{a,b}*.js&#39;}{src: [&#39;foo/a*.js&#39;, &#39;foo/b*.js&#39;]}

Copier après la connexion

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: {&#39;dest/b.js&#39;: [&#39;src/bb.js&#39;, &#39;src/bbb.js&#39;],&#39;dest/b1.js&#39;: [&#39;src/bb1.js&#39;, &#39;src/bbb1.js&#39;],},// orfiles: [{src: [&#39;src/aa.js&#39;, &#39;src/aaa.js&#39;], dest: &#39;dest/a.js&#39;},{src: [&#39;src/aa1.js&#39;, &#39;src/aaa1.js&#39;], dest: &#39;dest/a1.js&#39;},],

Copier après la connexion

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

grunt.initConfig({cssmin: {options: { /* ... */ },minify: { /* ... */ },combine: { /* ... */ }}});

Copier après la connexion

（3）grunt.registerTask

grunt.registerTask方法定义如何调用具体的任务。“default”任务表示如果不提供参数，直接输入grunt命令，则先运行“cssmin:minify”，后运行“cssmin:combine”，即先压缩再合并。如果只执行压缩，或者只执行合并，则需要在grunt命令后面指明“模块名:目标名”。

grunt # 默认情况下，先压缩后合并grunt cssmin:minify # 只压缩不合并grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

grunt-contrib-clean：删除文件。grunt-contrib-compass：使用compass编译sass文件。grunt-contrib-concat：合并文件。grunt-contrib-copy：复制文件。grunt-contrib-cssmin：压缩以及合并CSS文件。grunt-contrib-imagemin：图像压缩模块。grunt-contrib-jshint：检查JavaScript语法。grunt-contrib-uglify：压缩以及合并JavaScript文件。grunt-contrib-watch：监视文件变动，做出相应动作。

模块的前缀如果是grunt-contrib，就表示该模块由grunt开发团队维护；如果前缀是grunt（比如grunt-pakmanager），就表示由第三方开发者维护。

以下选几个模块，看看它们配置参数的写法，也就是说如何在grunt.initConfig方法中配置各个模块。

grunt-contrib-jshint

Copier après la connexion

jshint用来检查语法错误，比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。

jshint: {options: {eqeqeq: true,trailing: true},files: [&#39;Gruntfile.js&#39;, &#39;lib/**/*.js&#39;]},

Copier après la connexion

上面代码先指定jshint的检查项目，eqeqeq表示要用严格相等运算符取代相等运算符，trailing表示行尾不得有多余的空格。然后，指定files属性，表示检查目标是Gruntfile.js文件，以及lib目录的所有子目录下面的JavaScript文件。

grunt-contrib-concat

Copier après la connexion

concat用来合并同类文件，它不仅可以合并JavaScript文件，还可以合并CSS文件。

concat: {js: {src: [&#39;lib/module1.js&#39;, &#39;lib/module2.js&#39;, &#39;lib/plugin.js&#39;],dest: &#39;dist/script.js&#39;}css: {src: [&#39;style/normalize.css&#39;, &#39;style/base.css&#39;, &#39;style/theme.css&#39;],dest: &#39;dist/screen.css&#39;}},

Copier après la connexion

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

grunt-contrib-uglify

Copier après la connexion

uglify模块用来压缩代码，减小文件体积。

uglify: {options: {banner: bannerContent,sourceMapRoot: &#39;../&#39;,sourceMap: &#39;distrib/&#39;+name+&#39;.min.js.map&#39;,sourceMapUrl: name+&#39;.min.js.map&#39;},target : {expand: true,cwd: &#39;js/origin&#39;,src : &#39;*.js&#39;,dest : &#39;js/&#39;}},

Copier après la connexion

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

grunt-contrib-copy

Copier après la connexion

copy模块用于复制文件与目录。

copy: {main: {src: &#39;src/*&#39;,dest: &#39;dest/&#39;,},},

Copier après la connexion

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: {main: {expand: true,cwd: &#39;src/&#39;,src: &#39;**&#39;,dest: &#39;dest/&#39;,flatten: true,filter: &#39;isFile&#39;,},},grunt-contrib-watch

Copier après la connexion

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: {files: &#39;**/*.js&#39;,tasks: &#39;jshint&#39;,options: {livereload: true,}, }, css: {files: &#39;**/*.sass&#39;,tasks: [&#39;sass&#39;],options: {livereload: true,}, },},

Copier après la connexion

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: {build: {src: ["path/to/dir/one", "path/to/dir/two"]}}

Copier après la connexion

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: {build: {expand: true,cwd: &#39;build&#39;,src: [ &#39;**/*.css&#39; ],dest: &#39;build&#39;}},

Copier après la connexion

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: {server: {options: {port: 4000,base: &#39;build&#39;,hostname: &#39;*&#39;}}}

Copier après la connexion

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: {build: {options: {&#39;tag-pair&#39;: true,&#39;tagname-lowercase&#39;: true,&#39;attr-lowercase&#39;: true,&#39;attr-value-double-quotes&#39;: true,&#39;spec-char-escape&#39;: true,&#39;id-unique&#39;: true,&#39;head-script-disabled&#39;: true,},src: [&#39;index.html&#39;]}}

Copier après la connexion

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: {build: {options: {style: &#39;compressed&#39;},files: {&#39;build/css/master.css&#39;: &#39;assets/sass/master.scss&#39;}}}

Copier après la connexion

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: {all: {files: [{expand: true,src: &#39;*.md&#39;,dest: &#39;docs/html/&#39;,ext: &#39;.html&#39;}],options: {template: &#39;templates/index.html&#39;,}}},

Copier après la connexion

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

Document参考链接Frederic Hemberger, A build tool for front-end projectsMária Jurčovičová, Building a JavaScript Library with Grunt.jsBen Briggs，Speed Up Your Web Development Workflow with GruntOptimizing Images With GruntSwapnil Mishra, Simplifying Chores with GruntAJ ONeal, Moving to GruntJSGrunt Documentation, Configuring tasksLandon Schropp, Writing an Awesome Build Script with GruntMike Cunsolo, Get Up And Running With GruntMatt Bailey, A Beginner’s Guide to Using Grunt With MagentoPaul Bakaus, Supercharging your Gruntfile

Copier après la connexion

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!