Probablemente hay los siguientes pasos
Nuevo proyecto BEJS
Crear un nuevo paquete de archivos.json
Cree un nuevo archivo gruntfile.js
Ejecutar tareas gruñidos en la línea de comando
1. Nuevo proyecto BEJS
El código fuente se coloca en SRC, y el directorio tiene dos archivos JS, Selector.js y Ajax.js. Después de la compilación, el código se coloca en Dest, y este gruñido se generará automáticamente.
2. Cree un nuevo paquete.json
Package.json se coloca en el directorio raíz y contiene cierta meta información del proyecto, como el nombre del proyecto, la descripción, el número de versión, el paquete de dependencia, etc. Debe enviarse a SVN o GIT como el código fuente. La estructura actual del proyecto es la siguiente
El contenido de paquete de paquete. Json debe cumplir con las especificaciones de sintaxis JSON, de la siguiente manera
La copia del código es la siguiente:
{
"Nombre": "bejs",
"Versión": "0.1.0",
"Devdependencias": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-Jshint": "~ 0.1.1",
"Grunt-Contrib -uglify": "~ 0.1.2",
"Grunt-Contrib-Concat": "~ 0.1.1"
}
}
Grunt en Devdependencies se ha instalado en el artículo anterior, mientras que no está instalado Grunt-Contrib-Jshint/Grunt-Contrib -uglify/Grunt-Contrib-Concat. Tres para tres tareas
check de sintaxis gruñe-confun-js
Grunt-Contrib-Wuglify Compression, utilizando Uglifyjs
Archivos de combinación de gruñido-confun
En este momento, abra la herramienta de línea de comandos e ingrese el directorio raíz del proyecto, y escriba el siguiente comando: install npm
Verifique nuevamente el directorio raíz y descubra que hay un directorio adicional de Node_Modules, que incluye cuatro subdirectorios, vea la imagen
3. Cree un nuevo archivo gruntfile.js
Gruntfile.js también se coloca en el directorio de la raíz del proyecto. Casi todas las tareas se definen en este archivo. Es un archivo JS ordinario, donde se puede escribir cualquier código JS en lugar de JSON. Al igual que paquete.json, debe enviarse a SVN o GIT como el código fuente.
Gruntfile.js consiste en el siguiente contenido
La función de envoltura tiene la siguiente estructura. Esta es una forma típica de escribir nodo.js. Utilice las exportaciones para exponer la API
La copia del código es la siguiente:
módulo.exports = function (grunt) {
// Haz cosas relacionadas con el gruñido aquí
};
Configuración de proyectos y tareas
Cargar complementos y tareas gruñidos
Personalizar la ejecución de tareas
Este ejemplo completa las siguientes tareas
Fusionar los archivos en SRC (Ajax.js/Selector.js) a Domop.js
Comprimir Domop.js a Domop.min.js
Ambos archivos se colocan en el directorio Dest
El final gruntfile.js es el siguiente
La copia del código es la siguiente:
módulo.exports = function (grunt) {
// Configuración
grunt.initconfig ({
PKG: Grunt.file.readjson ('paquete.json'),
concat: {
Domop: {
src: ['src/ajax.js', 'src/selector.js'],
Dest: 'Dest/Domop.js'
}
},
Uglify: {
Opciones: {
Banner: '/*! < %= pkg.name %> < %= grunt.template.today ("yyyy-mm-dd") %> *// n '
},
construir : {
SRC: 'Dest/Domop.js',
Dest: 'Dest/Domop.min.js'
}
}
});
// Cargar complementos de concat y Uglify, para fusionar y compresión respectivamente
grunt.loadnpmtasks ('Grunt-Contrib-Concat');
grunt.loadnpmtasks ('Grunt-Contrib -uglify');
// registrar una tarea
grunt.registerTask ('predeterminado', ['concat', 'uglify']);
};
4. Ejecutar tareas de gruñidos
Abra la línea de comandos, ingrese el directorio raíz del proyecto y haga clic en Grunt
A partir de la información de impresión, se ve que se generan la fusión y la compresión exitosas y se generan el directorio Dest y los archivos esperados. En este momento, hay más Dest en el directorio del proyecto, como sigue
Ok, aquí hay dos tareas comunes, concat y Uglify, Jshint, etc., que no se introducen. El código en Gruntfile.js no se interpreta uno por uno. Los estudiantes interesados pueden encontrarlo en el documento oficial de Gruntjs.