آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 24) - بررسی CSS با CSSlint -قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۳۰ مرداد ۱۳۹۵

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-contrib-csslint صحبت کنیم و با استفاده از اون کدهای css خودمون رو عیب یابی کنیم و مشکلات اون رو بفهمیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

npm install grunt-contrib-csslint --save-dev

بعد از اینکار اینتر میزنیم:grunt install csslint

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install csslint 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install csslint 3

حالا باید یک وظیفه بنام csslint بسازیم:

module.exports = function (grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		concat: {
			options: {
				separator: '\n\n/*--------Next File-------*/\n\n',
				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */\n\n',
				footer: '\n\n/*------<%= pkg.author %>---------*/'
			},
			css: {
				src: ['development/css/css1.css', 'development/css/css2.css'],
				dest: 'final/css/final.css'
			},

			js: {
				src: ['development/js/js1.js', 'development/js/js2.js'],
				dest: 'final/js/final.js'
			}
		},

		uglify: {
			options: {
				mangle: false
			},
			js1: {
				files: {
					'final/js/js1.min.js': ['development/js/js1.js']
				}
			},
			js2: {
				files: {
					'final/js/js2.min.js': ['development/js/js2.js']
				}
			},
			all: {
				options: {
					sourceMap: true,
        			sourceMapName: 'final/js/all.min.js.map'
				},
				files: {
					'final/js/all.min.js': ['development/js/*.js']
				}
			}
		},

		cssmin: {
			options: {
				advanced: false,
				sourceMap: true,
        		sourceMapName: 'final/css/import.min.css.map'
			},
			all: {
				files: {
					'final/css/import.min.css': ['development/css/import.css']
				}
			}
		},

		coffee: {
			options: {
				bare: true,
				sourceMap: true,
				sourceMapDir: 'final/js/coffee.js.map'
			},
			compile: {
			    files: {
			      'final/js/coffee.js': ['development/coffee/coffee.coffee']
			    }
			}
		},

		less: {
			options: {
				compress: true,
				sourceMap: true,
				sourceMapFilename: 'final/css/less.css.map'
			},
			compile: {
				files: {
					'final/css/less.css': 'development/less/style.less'
				}
			}
		},

		sass: {
			dist: {
				options: {
	        sourcemap: 'none',
	        style: 'compressed'
	      },
	      files: {
	        'final/css/sass.css': 'development/sass/compile.sass',
	        'final/css/scss.css': 'development/sass/compile.scss'
	      }
	    }
		},

		pug: {
			compile: {
				options: {
					data: {
						debug: false
					}
				},
				files: {
					'final/html/template.html': ['development/pug/template.pug']
				}
			},
			debug: {
		    options: {
		      data: {
		        debug: true
		      }
		    },
		    files: {
		      'final/html/debug.html': 'development/pug/template.pug'
		    }
		  },
		  release: {
		    options: {
		      data: {
		        debug: false
		      }
		    },
		    files: {
		      'final/html/release.html': 'development/pug/template.pug'
		    }
		  }
		},

		csslint: {
			// ...
		}
	});

	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.loadNpmTasks('grunt-contrib-less');
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-pug');
	grunt.loadNpmTasks('grunt-contrib-csslint');

	grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'coffee', 'less', 'sass', 'pug']);
};

دیدید که بعد از task هایی که قبلا ساخته بودیم، وظیفه csslint رو هم ساختیم.

قبل از اینکه تنظیمات درون csslint رو قرار بدیم، باید مشخص کنیم که چه فایلهای CSS رو میخایم مورد هدف قرار بدیم. ما در جلسات قبلی یک فایل بنام final.css رو از فایلهای دیگه و با استفاده از grunt ساختیم و در این جلسه میخایم با استفاده از csslint اون رو بررسی کنیم. در ابتدا بگم که این پلاگین از ابزار csslint برای این کار استفاده میکنه، پس شما میتونین هر ویژگی که در csslint قابل استفاده هست رو، در اینجا هم استفاده کنید. فایل final.css بصورت زیر هست:

/*! grunt-project - v1.1.0 - 2016-08-20 */

body {
  text-align: left;
}



/* CSS is cool */





div {
  font-family: Roboto;
}


/*--------Next File-------*/

* {
  text-align: right;
}



/**
Headers
*/

h2 {
  font-family: Arial;
}


/*------Mohammad Esfandiari---------*/

اگر به سایت اصلی csslint سر زده باشید، میدونید که همه این کارا رو میشه با استفاده از اون انجام داد.csslint site

با کلیک بر روی دکمه ای که در بالا مشخص کردم، همه ویژگی هایی که با استفاده از این ابزار مورد بررسی قرار میگیرن رو مشاهده خواهید کرد:csslint site 2

میبینید که همه ویژگی‌ها تیک خوردن و به معنای است که همه اونا بررسی خواهند شد. لیست تمام این ویژگی‌ها به همراه توضیحات هر کدوم درون این صفحه قرار داده شده و شما میتونین با استفاده از این پلاگین از این ویژگی‌ها استفاده کنید. برای مثال اگه ما کدهای final.css رو درون تکس باکس سایت بالا قرار بدیم و بر روی Lint کلیک کنیم، خروجی زیر به ما نمایش داده میشه:csslint site 3

میبینید که یک warning به ما داده و بهمون گفته که بهتره از * استفاده نکنیم. خط و ... اون نیز مشخص شده.

در جلسه بعد به ادامه موضوع خواهیم پرداخت.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.