Express.js + Sass / Compass + CoffeeScript + Haml पर आवेदन

शुभ दोपहर
मैंने फ्रंट-एंड डेवलपर टूल के रूप में मिडिलमैन (रूबी) से एक्‍सप्रेस.जेएस (नोड) में स्विच करने के अनुभव को साझा करने का निर्णय लिया।
मैं खुद बैक-एंड में लगा हुआ हूं, इसलिए लेख बहुत प्रासंगिक नहीं हो सकता है, लेकिन कम से कम किसी के लिए उपयोगी है।

तो, कार्य: संबंधित फाइलों को संपादित करते समय Nass.js पर एक आवेदन करने के लिए सैस (कंपास), कॉफीस्क्रिप्ट और हैम "फ्लाई पर" संकलन के लिए समर्थन के साथ। ऐसा करने के लिए, हम क्रमशः वेब सर्वर शुरू करने और संकलन कार्य करने के लिए एक्सप्रेस और ग्रंट का उपयोग करेंगे।

सबसे पहले, हमें स्वयं नोड की आवश्यकता है। मैं इसकी स्थापना और संस्करण नियंत्रण के लिए एनवीएम (रूबी के लिए आरवीएम का एक एनालॉग) का उपयोग करना पसंद करता हूं।

हम NVM डालते हैं:

curl https://raw.github.com/creationix/nvm/master/install.sh | sh 

और इसे कनेक्ट करें:

 source ~/.nvm/nvm.sh 

अगला, हम नोड के नवीनतम संस्करण को स्थापित और कनेक्ट करते हैं (फिलहाल यह 0.10 नहीं बचा है। * इसलिए, नवीनतम संस्करण को स्थापित करने के लिए, यह रजिस्टर करने के लिए पर्याप्त है):

 nvm install 0.10 nvm use 0.10 

अब आप अपने npm पैकेज मैनेजर के साथ स्वयं नोड का उपयोग कर सकते हैं। हम विश्व स्तर पर एक्सप्रेस और ग्रंट डालते हैं:

 npm install -g express npm install -g grunt-cli 

एक्सप्रेस <प्रोजेक्ट> -e का उपयोग करके एक एक्सप्रेस एप्लिकेशन बनाएं:

 express develop -e cd develop 

-E विकल्प बेस टेम्पलेट इंजन को ईजेएस पर सेट करता है, जो चुपचाप सामान्य एचटीएमएल को प्रस्तुत करेगा जिसमें हम अपने एचएमएल को संकलित करेंगे। एप्लिकेशन को इस तरह से दिखाने की आवश्यकता है, ताकि ऐप सेटिंग में ऐप में जोड़ दें

 app.engine('html', require('ejs').renderFile); 

Npm के माध्यम से सभी आवश्यक पैकेज तुरंत स्थापित करें:

 npm install grunt-contrib-watch grunt-contrib-sass grunt-contrib-compass grunt-contrib-coffee grunt-contrib-haml grunt-express-server --save-dev 

(- the -ave-dev विकल्प हमारे पैकेज में आवश्यक निर्भरताएँ लिखेगा। ऐसा न करें कि आप बाद में उन्हें खो दें)

अब सभी अन्य एक्सप्रेस निर्भरताएँ स्थापित करें:

 npm install 

अच्छी तरह से और आखिरी: हम Gruntfile फ़ाइल बनाते हैं जिसमें हम आवश्यक कार्यों का वर्णन करेंगे:

 touch Gruntfile.js 

तैयारी पूरी हो गई है! अब - स्वयं कार्यों के लिए। ग्रंटफाइल में कुछ लिखना

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //      }); //      grunt.loadNpmTasks(''); //   -   grunt.registerTask('default', ['']); }; 

और हम इसे भरना शुरू करते हैं। सबसे पहले, लोड करने के लिए सभी आवश्यक मॉड्यूल कनेक्ट करें।

  grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-haml'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-coffee'); grunt.loadNpmTasks('grunt-express-server'); 

अब हम संकलन कार्यों (कार्यों) का वर्णन करना शुरू कर सकते हैं:
हम सभी दृश्य / फ़ोल्डर, सभी js और कॉफी को javascripts /, सभी css और स्टाइलशीट में scss / में संग्रहीत करेंगे।
एक उदाहरण के लिए कुछ फाइलें बनाते हैं:

 touch public/javascripts/x.coffee touch public/stylesheets/s.scss touch views/index.haml 

और हम डिफ़ॉल्ट रूप से बनाए गए इंडेक्स को हटा देंगे।

 rm views/index.ejs 

सभी कॉफी को एक जेएस में संकलित किया जा सकता है, जिसका हम उपयोग करेंगे।
संकलन के लिए कार्यों का एक सेट इस तरह दिखेगा:

  haml : { dist: { files: { 'views/index.html': 'views/index.haml' } } }, sass : { dist: { files: { 'public/stylesheets/s.css': 'public/stylesheets/s.scss' } } }, coffee : { compile: { files: { 'public/javascripts/x.js': ['public/javascripts/*.coffee'] } } } 

! काम करने के लिए haml कार्य के लिए, haml रत्न (और रूबी, निश्चित रूप से) सिस्टम पर स्थापित और सुलभ होना चाहिए!

Sass के बजाय Compass का उपयोग करने के लिए, आपको संबंधित कार्य (sass) को प्रतिस्थापित करना होगा

  compass: { dev: { options: { sassDir: ['public/stylesheets'], cssDir: ['public/stylesheets'], environment: 'development' } } }, 

अब रजिस्टर टास्क ब्लॉक में निष्पादन के लिए कार्य जोड़ें:

 grunt.registerTask('default', ['sass', 'coffee', 'haml']); 

(यदि आवश्यक हो तो सैस के बजाय कम्पास)

grunt रन करें और देखें कि कार्य सफलतापूर्वक पूरा हो चुके हैं, और अब संबंधित फ़ोल्डरों में आप index.html, s.css और x.js. पा सकते हैं।
यह केवल सर्वर को चालू करने और वॉच का उपयोग करके पुनर्संयोजन प्रक्रिया को स्वचालित बनाने के लिए बना हुआ है। ग्रंटफाइल इस तरह निकलेगा:

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //      watch : { haml : { files : 'views/*.haml', tasks : 'haml' }, coffee : { files : 'public/javascripts/*.coffee', tasks : 'coffee' }, sass : { files : 'public/stylesheets/*.scss', tasks : 'sass' }, // compass : { // files: ['public/stylesheets/*.{scss,sass}'], // tasks: ['compass'] // } }, express : { dev: { options: { script: 'app.js' } } }, haml : { dist: { files: { 'views/index.html': 'views/index.haml' } } }, sass : { dist: { files: { 'public/stylesheets/s.css': 'public/stylesheets/s.scss' } } }, compass: { dev: { options: { sassDir: ['public/stylesheets'], cssDir: ['public/stylesheets'], environment: 'development' } } }, coffee : { compile: { files: { 'public/javascripts/x.js': ['public/javascripts/*.coffee'] } } } }); //      grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-haml'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-coffee'); grunt.loadNpmTasks('grunt-express-server'); //   -   grunt.registerTask('default', ['sass', 'coffee', 'haml', 'express', 'watch']); }; 

(तदनुसार, कम्पास का उपयोग करने के लिए, आपको घड़ी कार्य विवरण और डिफ़ॉल्ट कार्य पंजीकरण में कम्पास कार्य को कम्पास में बदलने की आवश्यकता होगी)

खैर, अब grunt साथ आप हमारे एप्लिकेशन को चला सकते हैं, और स्रोत बदलने पर सभी आवश्यक फाइलें संकलित की जाएंगी।

अपडेट: लिवरेलोड
टास्क वॉच को लिवरेलड पृष्ठ पर कॉन्फ़िगर किया जा सकता है।
ऐसा करने के लिए, घड़ी के कार्य के विवरण के लिए उपयुक्त विकल्प जोड़ें:

  watch : { options: { livereload: true, nospawn: true }, haml : { files : 'views/*.haml', tasks : 'haml' }, coffee : { files : 'public/javascripts/*.coffee', tasks : 'coffee' }, // sass : { // files : 'public/stylesheets/*.scss', // tasks : 'sass' // }, compass: { files: ['public/stylesheets/*.{scss,sass}'], tasks: ['compass'] } } 

और डिफ़ॉल्ट पोर्ट 35729 के माध्यम से पृष्ठ पर लिवरेलड स्क्रिप्ट शामिल करें

 %script{src:"//localhost:35729/livereload.js"} 

===================

पढ़ने के लिए धन्यवाद!
निम्नलिखित लेखों में मैं अपना अनुभव Sails.js ( नोड्स पर रेल-जैसे MVC) और सर्वर-साइड JS के अन्य खुशियों के साथ साझा करने की योजना बना रहा हूं।